如何在 <td> 中插入 html 元素并将字符串转换为 HTML 元素？答案

【问题标题】：How to insert a html element in <td> and convert string to HTML element?如何在 <td> 中插入 html 元素并将字符串转换为 HTML 元素？
【发布时间】：2019-01-05 05:48:41
【问题描述】：

我有一个带有name 属性的对象数组，其中有一个带有h1 元素标记的字符串。当我尝试将数据绑定到表 td 时，它显示为纯文本而不是 html。

此处转载示例：https://stackblitz.com/edit/react-table-example-2rcaug?file=index.js

class App extends React.Component {
  constructor() {
this.state = {
  data:
  [
    {
      "id": 1,
      "name": "<h1>Foo</h1>",
      "age": "20"
    },
    {
      "id": 2,
      "name": "<h1>Bar</h1>",
      "age": "30"
    },
    {
      "id": 3,
      "name": "<h1>test</h1>",
      "age": "40"
    }
  ]
}
}
componentDidMount(){
 let test = [...this.state.data]
test.map((col, i) => {
      var wrapper = document.createElement("div");
      wrapper = col.name;
      test[i].name = wrapper
      console.log(wrapper)
    });

    this.setState({data : test})
}
render() {


return (
  <div>
    <Header />
    <table>
      <tbody>
        {this.state.data.map((person, i) => <TableRow key={i} data={person} 
/>)}
      </tbody>
    </table>
  </div>
);
} 
}


class Header extends React.Component {
render() {
return (
  <div>
    <h1>Header</h1>
  </div>
);
}
}

class TableRow extends React.Component {
render() {
return (
  <tr>
    <td>{this.props.data.id}</td>
    <td>{this.props.data.name}</td>
    <td>{this.props.data.age}</td>
  </tr>
);
}
}`

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

你有两个选择 1.从数据名称中删除h1

this.state = {
  data:
  [
    {
      "id": 1,
      "name": "Foo",
      "age": "20"
    },
    {
      "id": 2,
      "name": "Bar",
      "age": "30"
    },
    {
      "id": 3,
      "name": "test",
      "age": "40"
    }
  ]
}
}

class TableRow extends React.Component {
  render() {
     return (
       <tr>
         <td>{this.props.data.id}</td>
         <td><h1>{this.props.data.name}</h1></td>
         <td>{this.props.data.age}</td>
       </tr>
     );
  }
}`

危险地使用SetInnerHTML

class TableRow extends React.Component { render() { return ( <tr> <td>{this.props.data.id}</td> <td dangerouslySetInnerHTML = {this.props.data.name} /> <td>{this.props.data.age}</td> </tr> ); } }

【讨论】：

感谢您的回复.. 这样可以正常工作
请记住，使用危险的SetInnerHTML 会减慢您的网站速度，在安装和渲染时会导致速度变慢，您可以在本文的中途阅读：medium.com/@paularmstrong/…

【解决方案2】：

您可以使用 dangerouslySetInnerHTML 做到这一点，请检查一下

dangerouslySetInnerHTML

但是，我不建议以这种方式创建 DOM，而是让您的状态只保存如下值，并让标签在TableRow 组件内

this.state = {
      data:
      [
        {
          "id": 1,
          "name": "Foo",
          "age": "20"
        },
        {
          "id": 2,
          "name": "Bar",
          "age": "30"
        },
        {
          "id": 3,
          "name": "test",
          "age": "40"
        }
      ]
    }
  }

表格行组件：

class TableRow extends React.Component {
  render() {
    return (
      <tr>
        <td>{this.props.data.id}</td>
        <td><h1>{this.props.data.name}</h1></td>
        <td>{this.props.data.age}</td>
      </tr>
    );
  }
}

【讨论】：