如何在中插入HTML元素 <td> 並將字符串轉換為HTML元素？

Question

我有一個具有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>
);
}
}`

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

2. 危險地使用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> ); } }

Answer 2

您可以使用dragonallySetInnerHTML做到這一點，請檢查一下

危險地設置內部HTML

但是 ，我不建議您以這種方式創建DOM ，而是讓您的狀態僅包含如下所示的值，並將標記置於TableRow Component內部

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

TableRow組件：

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