React.js 将组件插入子组件

debugcn 发表于 Dev

亚历克斯·贝利

<div>
   <p>Test</p>
</div>

<button onClick={AddPara()}> Add New Paragraph </button>

function AddPara (){
   return(
      <div>
         <p> New Para </p>
      </div>
   )
}

test每次单击按钮时，我都试图在包含原始段落 ( )的主 Div 下获取新段落。我尝试使用 ReactDOM.render 但是它抛出一个错误告诉我改变状态而不是使用 DOM。

我该怎么做？

我正在尝试动态获取组件，而不是设置. 每次动态单击按钮时，我都试图插入，而不是仅仅有一个额外的

我试图得到的最终结果：

<div> 
   <p> Test </p>
   <p> New Para </p>
   <p> New Para </p>
    ... keep adding <p>New Para</p> on button click
</div>

dalisoft

这个演示是你想要的吗？如果是，请检查此答案是否已接受:)

希望这会有所帮助，祝您有美好的一天！

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = { items: [] };

    this.addParagraph = this.addParagraph.bind(this);
  }
  addParagraph() {
    this.setState({ items: [...this.state.items, 'New Para'] });
  }
  render() {
    return <div>
    <p>Test</p>
    {this.state.items.map((item, index) => 
    <p key={'child_' + index}>{item}</p>
    )}
    <button onClick={this.addParagraph}>Add paragraph</button>
    </div>
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

<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>
<div id="app"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。