javascript - React.js 将组件插入子组件

Question

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

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

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

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

我该怎么做？

我试图动态获取组件，而不是设置 <p> 的特定限制。 。而不是仅仅拥有一个额外的<p>我正在尝试插入 <p>每次动态点击按钮时

我想要得到的最终结果:

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

Answer 1

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

希望这有帮助，祝你有美好的一天!

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>