Вопрос:
Я использовал 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> ); }
