html - react : Create a new html element on click

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;

Answer 1

不，这不是正确的方法。 你不应该像那样生成 HTML 元素，也不应该让它们保持状态——这样操作 DOM 是违反 React 的。您将无法利用虚拟 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>
  );
}