Question

我试图通过单击按钮将html主体的背景颜色更改为红色，但是我只知道如何使用已经存在于体内的元素，而不是身体本身。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bgColor: ""
    };
  }

  boxClick = e => {
    this.setState({
      bgColor: "red"
    });
  };

  render() {
    return (
      <div className="App">
        <article className="experimentsHolder">
          <div
            className="boxClickCss"
            style={{ backgroundColor: this.state.bgColor }}
            onClick={this.boxClick}
          >
            Click Me!
          </div>
        </article>
      </div>
    );
  }
}

如您所见，我在div中添加了style={{backgroundColor: this.state.bgColor}}，但是由于它不在此文件中，因此无法将其添加到主体中。有帮助吗？

Answer 1

在lifecycle methods See doc here内部操作DOM通常是一个好习惯。如果这对您很重要，则可以在App.js组件上使用componentDidUpdate生命周期方法，然后从此处使用标准dom操作查找主体并更新其背景颜色。您还可以签入该方法，以确保在对其进行操作之前已更改了先前的状态和当前状态。看起来可能像这样：

class App extends Component {

constructor(props) {
 super(props);
 this.state = {
 bgColor: ""
 }
}

componentDidUpdate(prevProps, prevState){
  const { bgcolor } = this.state;

  if(prevProps.bgColor !== bgColor){
      const bodyElt = document.querySelector("body");
      bodyElt.style.backgroundColor = bgcolor;
    }
}

Answer 2

这是在React组件中操纵主体的示例，该示例改编自Frederic Caplette的回答，建议在生命周期方法中这样做。但是，我确实同意Erik Philips的评论，即通过添加/删除CSS类可以更好地完成这种操作。使用CSS类可以将样式的详细信息与组件逻辑分离，并在不影响该逻辑的情况下实现可扩展性。

const docBody = document.querySelector('body');

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {bgColored: false};
    this.colorBackground = this.colorBackground.bind(this);
    this.clearBackground = this.clearBackground.bind(this);
  }
  
  colorBackground() {
    this.setState({bgColored: true});
  }
  
  clearBackground() {
    this.setState({bgColored: false});
  }
  
  componentDidUpdate(prevProps, prevState) {
    const { bgColored } = this.state;
    const className = 'redBg';

    if(prevState.bgColored !== bgColored){
      bgColored ?
        docBody.classList.add(className) :
        docBody.classList.remove(className);
    }
  }
  
  render() {
    return (
      <div>
        <a href="#" onClick={() => this.colorBackground()}>Turn Red</a>
        {' | '}
        <a href="#" onClick={() => this.clearBackground()}>Reset</a>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

.redBg {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
<div id="root"></div>
</body>

使用React在单击时更改主体元素的背景颜色？

2 个答案: