反应 JS。将元素附加到 DOM答案

【问题标题】：React JS. Append element to the DOM反应 JS。将元素附加到 DOM
【发布时间】：2018-09-23 08:45:07
【问题描述】：

我是新来的反应，过去几天我一直在玩它。我正在尝试向 DOM 附加一个值，我找到了一种方法，但我正在寻找一种方法来处理

var para = document.createElement("li");
var t = document.createTextNode(value);
para.appendChild(t);
document.getElementById("root").appendChild(para);

但是，我正在寻找一种不同的方式。我尝试了几种不同的方法，但我被卡住了。除了上面这种方法还有没有其他方法^^^^

import React, { Component } from 'react';
import { render } from 'react-dom';


export class Parent extends React.Component {
  constructor(props) {
    this.greet = this.greet.bind(this);
    this.state = { text: " " };
  }

  greet(value) {
    //console.log(value);

    var para = document.createElement("li");
    var t = document.createTextNode(value);
    para.appendChild(t);
    document.getElementById("root").appendChild(para); 

  }

  render() {
    return (
      <div>
        <Child onGreet={this.greet} />
      </div>
    )
  }
};


export class Child extends React.Component {

  constructor(props) {
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
    this.eventClick = this.eventClick.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  eventClick() {
    this.props.onGreet(this.state.value);
  }

  render() {
    return (
      <div>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button type="button" onClick={this.eventClick}>Submit </button>
      </div>
    )
  }
};

【问题讨论】：

不要编辑您的问题来询问一个完全不同的概念，而是提出一个新问题。
还建议您查看本教程，以便您了解 为什么 justelouise 的答案有效，并更好地了解 React 中的工作方式。 reactjs.org/tutorial/tutorial.html
对不起，继续改回来。谢谢你的链接

标签： javascript reactjs dom createelement

【解决方案1】：

你可以尝试利用 React 的 state 属性。

import React, { Component } from 'react';
import { render } from 'react-dom';

export class Parent extends React.Component {
  constructor(props) {
    this.greet = this.greet.bind(this);
    this.state = {
      text: [],
    };
  }

  greet(value) {
    //console.log(value);

    const {text} = this.state
    return this.setState({
      text: text.concat(value),
    });

  }

  render() {
    return (
      <div>
        <Child onGreet={this.greet} />
        <ul>
        {this.state.text.map(x => (<li>{x}</li>))}
        </ul>
      </div>
    )
  }
};

这样，列表会随着 this.state.text 值的变化而填充。

【讨论】：