如何通过代码更改reactjs组件的样式

我需要更改react组件的一些子组件的样式。大概是这样的：

import React, { Component } from 'react';

class Parent extends Component {
   onClickHandler = (event) => {
      this.props.children[0].props.style.marginLeft = "-100%";
   }
   render() {
      <div onClick={this.onClickHandler}>
         {this.props.children}
      </div>
   }
}

export default Parent;

import React, { Component } from "react";

class Parent extends Component {
  constructor() {
    this.state = {
        bigMargin: false
    };
  }

  onClickHandler = (event) => {
      event.preventDefault();
      this.setState({ bigMargin: true });
  };

  render() {
    return (
        <div className={`parent-class ${bigMargin && 'big-margin'}`} onClick={this.onClickHandler}>
            {this.props.children}
        </div>
    );
  }
}

export default Parent;

你们能帮帮我吗

---

非常感谢

React道具是不可变的，您不能更改它们，它们是只读的，您不能添加新属性。 这是通过

Object.preventExtensions

、

Object.seal

和

Object.freeze

完成的

要部分“修复”错误，您应该在父组件的第一个子组件中定义marginLeft

<Parent>
    <p style={{marginLeft: '0'}}>1</p>
    <p>2</p>
</Parent>

想象一下，如果你有能力改变道具，你会将同一道具传递给许多孩子，其中一个孩子会改变道具的值，这会导致意想不到的行为。

试试类似的方法 单击时按元素id抓取元素

document.getElementById("demo").style.marginLeft = '-100px'

---

或者使用react refs获取元素

您得到的错误是因为无法修改道具，因为道具是不可变的。使用简单的CSS和简单的状态管理可以实现更简单的方法

使用这种技术，您需要一个状态变量来知道何时添加类修饰符。该类修改器负责覆盖子组件的样式

JS将如下所示：

import React, { Component } from 'react';

class Parent extends Component {
   onClickHandler = (event) => {
      this.props.children[0].props.style.marginLeft = "-100%";
   }
   render() {
      <div onClick={this.onClickHandler}>
         {this.props.children}
      </div>
   }
}

export default Parent;

import React, { Component } from "react";

class Parent extends Component {
  constructor() {
    this.state = {
        bigMargin: false
    };
  }

  onClickHandler = (event) => {
      event.preventDefault();
      this.setState({ bigMargin: true });
  };

  render() {
    return (
        <div className={`parent-class ${bigMargin && 'big-margin'}`} onClick={this.onClickHandler}>
            {this.props.children}
        </div>
    );
  }
}

export default Parent;

---

您可以使用React ref访问原始DOMNode并将其设置为这样的样式，但通常应该避免DOM突变。见：

.big-margin:first-child {
  margin-left: -100%;
}