React：在点击时创建一个新的html元素

我已经使用了React几个星期但是我有这个简单的问题,我似乎无法解决这个问题.这是关于创建新的html元素.

我想知道一般来说,我采用的方式是“正确的方式”,还是有另一种使用点击功能创建新的html元素的首选方法.

出于某种原因,这个问题花了一段时间让我弄明白,它仍然感觉有点奇怪,这就是我要问的原因.

提前致谢！

import React, { Component } from 'react';
import './Overview.css';

import Project from './Project';

class Overview extends Component {
 constructor() {
  super()
  this.state = {
   itemArray: []
  }
}

createProject() {
 const item = this.state.itemArray;
 item.push(
   <div>
     <h2>Title</h2>
     <p>text</p>
   </div>
 )
 this.setState({itemArray: item})
 //console.log(this.state)
}

render() {
 return (
   <div className="Overview">
     <p>Overview</p>
     <button onClick={this.createProject.bind(this)}>New Project</button>
     <Project />
     <div>
       {this.state.itemArray.map((item, index) => {
         return <div className="box" key={index}>{item}</div>
       })}
     </div>
   </div>
  );
 }
}

export default Overview;

不,这不是一个正确的方法.你不应该生成像这样的HTML元素,也不应该让它们处于状态 – 这样就反对React来操纵DOM.您将无法利用Virtual DOM是我能想到的第一件事.

你应该做的是保留状态渲染所需的所有数据,然后从那里生成HTML元素

createProject() {
  const item = this.state.itemArray;
  const title = '';
  const text = '';
  item.push({ title, text })
  this.setState({itemArray: item})
}

render() {
  return (
    <div className="Overview">
      <p>Overview</p>
      <button onClick={this.createProject.bind(this)}>New Project</button>
      <Project />
      <div>
        {this.state.itemArray.map((item, index) => {
          return (
            <div className="box" key={index}>
                <div>
                 <h2>{item.title}</h2>
                 <p>{item.text}</p>
               </div>
            </div>
          )
        })}
      </div>
    </div>
  );
}