如何将一个React组件（或原始html）传递到其他React组件并将其插入？
[英]How to pass a React component (or raw html) into other React component and insert it?
问题描述
I have raw html markup returned from ajax. 
我有从ajax返回的原始html标记。 Rendering raw html is not easy in React. 在React中渲染原始html并不容易。 I tried to use their dangerouslySetInnerHTML up and down but no go, only errors are thrown from React. 我试图上下使用他们的dangerouslySetInnerHTML ，但没有成功，只有React抛出了错误。 That dangerouslySetInnerHTML is truly obscure. SetInnerHTML的dangerouslySetInnerHTML性确实是晦涩的。
So I decided to compile my raw html to a React component and insert it. 因此，我决定将原始html编译为React组件并将其插入。 Raw html is compiled to React component all right but I cannot insert it. 原始html可以编译为React组件，但是我不能插入它。 Here is my code. 这是我的代码。 I want to pass <Html /> component (or raw html would be even better) to <Tr /> component as this.props.b : 我想将<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} />
);
}
});
Now how to insert either raw html or <Html /> into DOM <td> element? 现在如何将原始html或<Html />插入DOM <td>元素？ Using {this.props.b} doesn't work. 使用{this.props.b}不起作用。
And the inportant thing here is that I cannot change this.props.b to smth else like this.props.child , this.props.children , etc. I need that this.props.b because there is a loop in parent FooComponent component and I assign values to this.props.b using many if/else conditions (not shown above for the sake of simplicity): 最重要的是，我无法将this.props.b更改为this.props.child ， this.props.children等，我需要this.props.b因为在父FooComponent组件中存在一个循环并且我使用许多if/else条件为this.props.b赋值（为简单起见，上面未显示）：
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>
);
}
});
2 个解决方案
解决方案1
2 2015-12-08 13:10:20
The render method in your Html component will throw an error, because a component needs to return a valid ReactComponent , not a string. Html组件中的render方法将引发错误，因为组件需要返回有效的ReactComponent而不是字符串。
I think you could parse the HTML and append as children in componentDidMount : https://jsfiddle.net/4z13gp7g/ 我认为您可以解析HTML并将其作为子componentDidMount添加到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')
);
解决方案2
0 2015-12-08 21:36:26
Do you need a react class for Html var? 您是否需要Html var的react类？
If not, try this: 如果没有，请尝试以下操作：
var FooComponent = React.createClass({
render: function() {
var Html = (myRawHtmlMarkup);
return (
<Tr id={key} a={value} b={Html} />
);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.