我是 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> ); } };
希望您清楚我需要做什么,并且能够帮助我找到合适的解决方案。
使用 React 时,不要使用 jQuery 来操作 DOM。React 组件应该呈现在特定状态下应有的样子;转换为什么 DOM 由 React 本身负责。
您要做的就是将“决定要渲染什么的状态”存储在链条的上层,然后向下传递。如果您要渲染n子项,则该状态应由包含您的组件的任何内容“拥有”。例如:
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> );