React.js：如何在点击时附加组件？

小能豆

React.js：如何在点击时附加组件？

javascript

我是 React 的新手，对一些基本的东西感到困惑。

我需要在 DOM 呈现之后，在点击事件上将组件附加到 DOM。

我最初的尝试如下，但并没有奏效。但这是我想到的最好的尝试。（提前为将 jQuery 与 React 混合使用道歉。）

    ParentComponent = class ParentComponent extends React.Component {
      constructor () {
        this.addChild = this.addChild.bind(this);
      }

      addChild (event) {
        event.preventDefault();
        $("#children-pane").append(<ChildComponent/>);
      }

      render () {
        return (
          <div className="card calculator">
            <p><a href="#" onClick={this.addChild}>Add Another Child Component</a></p>
            <div id="children-pane">
              <ChildComponent/>
            </div>
          </div>
        );
      }
    };

希望您清楚我需要做什么，并且能够帮助我找到合适的解决方案。

阅读 41

2024-06-07

共1个答案

小能豆

使用 React 时，不要使用 jQuery 来操作 DOM。React 组件应该呈现在特定状态下应有的样子；转换为什么 DOM 由 React 本身负责。

您要做的就是将“决定要渲染什么的状态”存储在链条的上层，然后向下传递。如果您要渲染n子项，则该状态应由包含您的组件的任何内容“拥有”。例如：

class AppComponent extends React.Component {
  state = {
    numChildren: 0
  }

  render () {
    const children = [];

    for (var i = 0; i < this.state.numChildren; i += 1) {
      children.push(<ChildComponent key={i} number={i} />);
    };

    return (
      <ParentComponent addChild={this.onAddChild}>
        {children}
      </ParentComponent>
    );
  }

  onAddChild = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    });
  }
}

const ParentComponent = props => (
  <div className="card calculator">
    <p><a href="#" onClick={props.addChild}>Add Another Child Component</a></p>
    <div id="children-pane">
      {props.children}
    </div>
  </div>
);

2024-06-07