我是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.反应组件应呈现给定某种状态时它们应该是什么样子的表示.什么DOM翻译是由React本身照顾.
你想要做的是将链条上的“确定要渲染的状态”存储起来,并将其传递下来.如果你渲染N个孩子,那么这个状态应该由包含你的组件的任何东西“拥有”.例如：
class AppComponent extends React.Component {
constructor () {
this.state = {
numChildren: 0
};
}
render () {
const children = [];
for (var i = 0; i < this.state.numChildren; i += 1) {
children.push(<ChildComponent number={i} />);
};
return (
<ParentComponent addChild={this.onAddChild.bind(this)}>
{children}
</ParentComponent>
);
}
onAddChild () {
this.setState({
numChildren: this.state.numChildren + 1
});
}
}
class ParentComponent extends React.Component {
render () {
return (
<div className="card calculator">
<p><a href="#" onClick={this.props.addChild}>Add Another Child Component</a></p>
<div id="children-pane">
{this.props.children}
</div>
</div>
);
}
}
class ChildComponent extends React.Component {
render () {
return (
<div>{"I am child " + this.props.number}</div>
);
}
}
