React.js将组件插入Child

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>

Answer 2

我猜你是很新的反应。在这种情况下，我强烈建议您稍微阅读一下文档。现在关于您的问题，您只需在按钮单击功能中添加一个setState，并根据值更改显示新的para。

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});
}

Answer 3

根据您的问题，您希望在按钮单击时添加新段落。

为此，您需要在状态中的数组上使用map来渲染数组中的每个项目。

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

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>
    );
  }
}

这是一个Codesandbox Example

但应注意，您可以在setState中使用updater函数，以确保在同一周期内不进行多次调用。

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

有关更多信息，请参阅setState Api docs。

Answer 4

如果我理解正确，你想做这样的事情 -

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>
   )
}

当您单击按钮时，它现在将用Test替换段落内的内容:)