我怎样才能把它从字符串变成 HTML？

Question

所以我遇到了这个问题，我的代码被吐出为字符串而不是我试图实现的 html。我的问题是如何在吐出之前将其转换为 innerHTML？如果我将它推到数组中，甚至可以做到这一点吗？我的目标是让它像“待办事项列表应用程序”，它有多个输入，将每个值吐到每一行。

class Forma extends React.Component {

constructor(){
  super()
  this.state ={
    name: '',
    birth: '',
    age: '',
    items: []
  }
  this.handleInputChange = this.handleInputChange.bind(this)
  this.submitItem = this.submitItem.bind(this)
}

handleInputChange(event){
let name = event.target.name
let birth = event.target.birth
let age = event.target.age
let value = event.target.value

this.setState({ [name] : value, [birth] : value, [age] : value})
}

submitItem (){
  let items = this.state.items
  let item = this.state.name
  let birth =this.state.birth
  let age = this.state.age
  let i = "<th>"
  let z = "</th>"

  let all =i + item + z + i + birth + z + i + age +z
  items.push(all)
 
  
  this.setState({ items: items})
}


  render(){
    return (
      <div className="App">
        <h1>To do List</h1>
        <input type="text" name="name" onChange={this.handleInputChange}></input>
        <input type="text" name="birth" onChange={this.handleInputChange}></input>
        <input type="text" name="age" onChange={this.handleInputChange}></input>
          <button onClick={this.submitItem}>Submit</button>
          

          {this.state.items.map((all) => {
            
            return(
              <tr>{all}<button type="submit" className="delete">Delete</button></tr>

           
            );
          })}
          
      </div>
    );
  }

}

Answer 1

来自文档：dangerouslysetinnerhtml 可用于从字符串呈现 html

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 中设置 HTML，但你必须输入 dangerouslySetInnerHTML 并使用 __html 键传递一个对象，以提醒自己这是危险的。

<tr dangerouslySetInnerHTML={{all}}><button type="submit" className="delete">Delete</button></tr>