Question

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

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

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

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替换段落内的内容：）

Answer 3

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

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 4

从您的问题中，您想在单击按钮时添加一个新段落。

要执行此操作，您需要在状态下的某个数组上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。

React.js将组件插入子级

4 个答案: