Question

是否可以使用react通过id显示和隐藏现有的div元素？

例如，我要使用react通过按钮单击来显示和隐藏此<div id="example">this is example</div>，并且此元素不是由react创建的。

Answer 1

首先，您需要了解React的理念。我强烈建议您阅读官方的React教程：https://reactjs.org/tutorial/tutorial.html。在这种情况下，您希望出现或消失div，这可以通过更改React组件的内部状态来实现。然后，您需要创建一个绑定到Component实例的上下文的函数。例如：

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true,
    };
  }

  toggle() {
    const { open } = this.state;
    this.setState({
      open: !open,
    });
  }

  render() {
    const { open } = this.state;
    return (
      <main>
        <button onClick={this.toggle.bind(this)}>{open ? 'Hide' : 'Show'}</button>
        {open && <div id="example"><h1>this is example</h1></div>}
      </main>
    );
  }
}

这是一个codepen：https://codepen.io/anon/pen/PxWdZK?editors=1010

如何通过react修改html中的现有div元素？

1 个答案: