Javascript 反应JS。将元素追加到DOM中

我是个新的反应者，过去几天我一直在玩弄它。我试图在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>
    )
  }
};

import React，{Component}来自'React'；
从'react dom'导入{render}；
导出类父类扩展React.Component{
建造师（道具）{
this.greet=this.greet.bind（这个）；
this.state={text:”“}；
}
问候（价值）{
//console.log（值）；
var para=document.createElement（“li”）；
var t=document.createTextNode（值）；
第3（t）段；
document.getElementById（“根”）.appendChild（第段）；
}
render（）{
返回(
)
}
};
导出类子类扩展React.Component{
建造师（道具）{
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.eventClick=this.eventClick.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
eventClick（）{
this.props.onGreet（this.state.value）；
}
render（）{
返回(
提交
)
}
};

您可以尝试利用React的状态属性

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>
    )
  }
};

import React，{Component}来自'React'；
从'react dom'导入{render}；
导出类父类扩展React.Component{
建造师（道具）{
this.greet=this.greet.bind（这个）；
此.state={
案文：[]，
};
}
问候（价值）{
//console.log（值）；
const{text}=this.state
返回此.setState({
text:text.concat（值），
});
}
render（）{
返回(

{this.state.text.map（x=>（
{x}
）}

)
}
};

---

有了这个选项，列表将填充为this.state.text的值更改。

请提出一个新问题，而不是编辑您的问题来询问一个完全不同的概念。还建议您阅读本教程，以便理解justelouise的答案的作用，以及更好地了解在React中如何处理事情。对此很抱歉，请继续并将其更改回。谢谢你的链接