Javascript React.js将组件插入子组件

试验

添加新段落 函数AddPara（）{ 返回( 新段落

) } 每次单击按钮时，我都试图在包含原始段落的主Div下获取新段落（

test

）。我尝试使用ReactDOM.render，但它向我抛出一个错误，告诉我更改状态而不是使用DOM

我该怎么做

我尝试动态获取组件，而不是设置特定的限制

。每次动态单击按钮时，我都会尝试插入

，而不仅仅是额外的

我想要得到的最终结果是：

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

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

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

试验

新段落

新段落

... 单击按钮继续添加新段落

如果我理解正确，您想这样做吗-

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

class AddPara扩展了React.Component{
状态={
段落案文：“新的段落”
};
添加段落=（）=>{
this.setState（{paragraphText:“Test”}）；
}
返回(
{this.state.paragraphText}

添加新段落
)
}

---

当你点击按钮时，它现在会将段落中的内容替换为

Test

：）

我猜你是个新手。如果是这样的话，我强烈建议您稍微阅读一下文档。 关于你的问题， 您只需在button click函数中添加一个setState，并根据值的变化显示新的段落

class AddPara extends React.Component {
   state = {
     paragraphText: "New Para"
   };

   addParagraph = () => {
      this.setState({ paragraphText: "Test" });
   }

   return(
      <div>
         <p>{this.state.paragraphText}</p>
         <button onClick={this.addParagraph}>Add New Paragraph</button>
      </div>
   )
}

状态={
放映时间：0
}
渲染（）{
//其他代码
试验

{新数组（this.state.showTime）.map（（）=>newpara
）}
添加新段落
}
函数AddPara（）{
this.setState（{showTime:this.state.showTime+1}）；
}

这是您想要的演示吗？如果是，请检查此答案是否被接受：）

希望这有帮助， 祝你今天愉快

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={items:[]}；
this.add段落=this.add段落.bind（this）；
}
添加第（）段{
this.setState（{items:[…this.state.items，'newpara']}）；
}
render（）{
回来
试验

{this.state.items.map（（项，索引）=>
{item}
)}
添加段落
}
}
ReactDOM.render（，document.getElementById（'app'））
根据您的问题，您希望在单击按钮时添加新段落

要做到这一点，您需要将

映射到处于您状态的数组上，以渲染数组中的每个项目

如果要添加新段落，只需将新段落添加到当前状态即可

state = {
 showTime: 0
}
render () {
// Other code
<div>
   <p> Test </p>
{new Array(this.state.showTime).map(() => <p> New Para </p>)}
</div>

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

function AddPara (){
   this.setState({showTime: this.state.showTime + 1});
}

---

有关更多信息，请参阅。

能否显示完整的组件，因为很难用部分代码给出答案？从一开始就是

Test

，因为默认状态设置为YUP，我猜你忘了更改setState中的文本。我正在尝试在下添加一个新组件，而不仅仅是更新当前文本。这种方法是动态的吗？如果你点击按钮5次，新的会显示5次吗？啊，你想继续添加组件。请给我一分钟，更新答案Alex，请确保使用

key

prop并使用right

key

index，我建议使用文本内容+索引或文本id（如果有）来提高性能并减少问题。这是我的测试目的：）谢谢！工作得很好。祝你一切顺利：）

class App extends Component {
  state = {
    paragraphs: ["hello world"]
  };

  addParagraph = () => {
    this.setState({
      paragraphs: [...this.state.paragraphs, "new paragraph"]
    });
  };

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        {this.state.paragraphs.map(paragraph => (
          <p>{paragraph}</p>
        ))}
        <button onClick={this.addParagraph}>Add Paragraph</button>
      </div>
    );
  }
}

addParagraph = () => {
    this.setState(prevState => ({
      paragraphs: [...prevState.paragraphs, "new paragraph"]
    }));
  };