[英]How to insert a html element in <td> and convert string to HTML element?
I have an array of objects with name
property that has a string with h1
element tag. 我有一个具有
name
属性的对象数组,该对象具有带h1
元素标签的字符串。 When I tried to bind data to a table td it shows as plain text instead of html. 当我尝试将数据绑定到表td时,它显示为纯文本而不是html。
Example reproduced here: https://stackblitz.com/edit/react-table-example-2rcaug?file=index.js 此处转载示例: 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>
);
}
}`
you have two options 1. remove h1 from data name 您有两个选择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>
);
}
}`
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> ); } }
You Can do this using dangerouslySetInnerHTML , Please check this out 您可以使用dragonallySetInnerHTML做到这一点,请检查一下
dangerouslySetInnerHTML 危险地设置内部HTML
But , I don't recommend creating DOM this way, instead, let your state hold only values like below, and let the tag be inside TableRow
Component 但是 ,我不建议您以这种方式创建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 Component : 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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.