Question

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

我想知道一般情况下，我采用的方式是＆＃34;正确的方式＆＃34;或者是否有另一种使用点击功能创建新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元素，也不应该将它们保持在状态 - 这样就反对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>
  );
}

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

1 个答案: