React：点击时创建新的HTML元素

Question

我已经使用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;

- Jockemon

Answer 1

不，这不是正确的方法。 您不应该像那样生成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>
  );
}

- Lyubomir

---

好的！谢谢你的解释，我很感激 :) - Jockemon

很高兴我能帮到你;-) - Lyubomir

干净的解决方案！我喜欢它 :) - Deano