gpt4 book ai didi

javascript - 如何将 React 组件(或原始 html)传递到其他 React 组件并插入它?

转载 作者:行者123 更新时间:2023-11-30 16:25:50 27 4
gpt4 key购买 nike

我有从 ajax 返回的原始 html 标记。在 React 中渲染原始 html 并不容易。我尝试使用他们的 dangerouslySetInnerHTML上下但不走,只从 React 抛出错误。那dangerouslySetInnerHTML真的很晦涩。

所以我决定将我的原始 html 编译成一个 React 组件并插入它。原始 html 可以编译为 React 组件,但我无法插入它。这是我的代码。我想通过 <Html />组件(或原始 html 会更好)到 <Tr />组件为 this.props.b :

var FooComponent = React.createClass({
render: function() {
var Html = React.createClass({
render: function() {
return (
myRawHtmlMarkup
);
}
});

return (
<Tr id={key} a={value} b={Html} />
);
}
});

现在如何插入原始 html 或 <Html />进入 DOM <td>元素?使用 {this.props.b}不起作用。

重要的是我不能改变this.props.b其他类似this.props.child , this.props.children等。我需要那个 this.props.b因为父FooComponent中有一个循环组件,我将值分配给 this.props.b使用很多 if/else条件(为简单起见,上面未显示):

var Tr = React.createClass({
render: function() {
return (
<tr>
<td className="idCol">{this.props.id}</td>
<td className="aCol">{this.props.a}</td>
<td className="bCol">{this.props.b}</td>
</tr>
);
}
});

最佳答案

Html 组件中的render 方法会抛出错误,因为组件需要返回有效的ReactComponent,而不是字符串。

我认为您可以解析 HTML 并将其附加为 componentDidMount 中的子项:https://jsfiddle.net/4z13gp7g/

var Tr = React.createClass({
componentDidMount: function(){
var div = document.createElement('div');
div.innerHTML = this.props.b;
this.refs.b.appendChild( div.firstChild )
},
render: function() {
return (
<tr>
<td className="idCol">{this.props.id}</td>
<td className="aCol">{this.props.a}</td>
<td className="bCol" ref="b"></td>
</tr>
);
}
});

ReactDOM.render(
<Tr id="key" a="value" b="<p><strong>Hi</strong></p>" />,
document.querySelector('table tbody')
);

关于javascript - 如何将 React 组件(或原始 html)传递到其他 React 组件并插入它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34156062/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com