React – 如何在道具中传递HTML标签？
我希望能够传递HTML标签的文本，如下所示：
<MyComponent text="This is <strong>not</strong> working." /> 但是在MyComponent的渲染方法里面，当我打印出this.props.text ，它实际上打印出了一切：
This is <strong>not</strong> working.
有什么办法让ReactparsingHTML并将其正确地转储出去吗？
您可以使用带有string和JSX元素的混合数组（请参阅此处的文档）：
<MyComponent text={["This is ", <strong>not</strong>, "working."]} />
这里有一个小提琴，它显示它的工作： http : //jsfiddle.net/7s7dee6L/
此外，作为最后的手段，您始终可以插入原始HTML，但要小心，因为如果不清除属性值，可能会导致跨站点脚本攻击（XSS）攻击。
其实，有很多方法可以解决这个问题。
你想在你的道具里面使用JSX
您可以简单地使用{}来使JSXparsing参数。 唯一的限制与每个JSX元素相同：它只能返回一个根元素。
myProp={<div><SomeComponent>Some String</div>}
最好的可读方法是创build一个renderMyProp函数，它将返回JSX组件（就像标准渲染函数一样），然后简单地调用myProp = {this.renderMyProp（）}
你只想传递一个string作为HTML
默认情况下，JSX不允许您从string值中呈现原始HTML。 但是，有一种方法可以做到这一点：
myProp="<div>This is some html</div>"
然后在你的组件中，你可以像这样使用它：
<div dangerouslySetInnerHTML={this.props.myProp}></div>
请注意，这个解决scheme“可以”在跨站点脚本伪造攻击上打开。 另外要注意的是，你只能渲染简单的HTML，没有JSX标签或组件或其他奇特的东西。
arrays的方式
在反应中，您可以传递一个JSX元素的数组。 这意味着：
myProp={["This is html", <span>Some other</span>, "and again some other"]}
它不会推荐这种方法，因为：
- 它会创build一个警告（丢失键）
- 这是不可读的
- 这实际上并不是JSX的方式，它比预期的devise更为黑客。
孩子的方式
为了完整性而添加它，但是在做出反应的同时，还可以获取组件内部的所有孩子。
所以，如果我采取以下代码：
<SomeComponent> <div>Some content</div> <div>Some content</div> </SomeComponent>
然后，这两个div将在SomeComponent中以this.props.childrens的forms提供，并且可以使用标准的{}语法来呈现。
当你只有一个HTML内容传递给你的组件时，这个解决scheme是完美的（设想一个Popin组件只将Popin的内容作为子组件）。
但是，如果您有多个内容，则不能使用子项（或者您至less需要将其与另一个解决scheme组合在一起）
你可以使用危险的SetInnerHTML
只需发送一个普通的string的HTML
<MyComponent text="This is <strong>not</strong> working." />
并在这样的JSX代码中呈现：
<h2 className="header-title-right wow fadeInRight" dangerouslySetInnerHTML={{__html: props.text}} />
如果您正在渲染用户input的数据，请小心。 您可能成为XSS攻击的受害者
这里是文档： https ： //facebook.github.io/react/tips/dangerously-set-inner-html.html
<MyComponent text={<span>This is <strong>not</strong> working.</span>} />
然后在你的组件中，你可以这样做prop检查：
import React from 'react'; export default class MyComponent extends React.Component { static get propTypes() { return { text: React.PropTypes.object, // if you always want react components text: React.PropTypes.any, // if you want both text or react components } } }
确保你只select一种道具types。
对我来说，它通过在道具儿童传递HTML标签
<MyComponent>This is <strong>not</strong> working.</MyComponent> var MyComponent = React.createClass({ render: function() { return ( <div>this.props.children</div> ); },
你可以用我知道的两种方法做到这一点。
1- <MyComponent text={<p>This is <strong>not</strong> working.</p>} />
然后做这个
class MyComponent extends React.Component { render () { return (<div>{this.props.text}</div>) } }
或者第二种方法是这样做的
2- <MyComponent><p>This is <strong>not</strong> working.</p><MyComponent/>
然后做这个
class MyComponent extends React.Component { render () { return (<div>{this.props.children}</div>) } }
你也可以使用组件上的函数来通过jsx传递道具。 喜欢：
var MyComponent = React.createClass({ render: function() { return ( <OtherComponent body={this.body} /> ); }, body() { return( <p>This is <strong>now</strong> working.<p> ); } }); var OtherComponent = React.createClass({ propTypes: { body: React.PropTypes.func }, render: function() { return ( <section> {this.props.body()} </section> ); }, });
在我的项目中，我必须从variables传递dynamichtml片段，并将其呈现在组件中。 所以我做了以下。
defaultSelection : { innerHtml: {__html: '<strong>some text</strong>'} }
defaultSelection对象从.js文件传递给组件
<HtmlSnippet innerHtml={defaultSelection.innerHtml} />
HtmlSnippet组件
var HtmlSnippet = React.createClass({ render: function() { return ( <span dangerouslySetInnerHTML={this.props.innerHtml}></span> ); } });
普朗克例子
对doc进行危险的设置
是的，你可以通过使用混合数组与string和JSX元素。 参考
<MyComponent text={["This is ", <strong>not</strong>, "working."]} />
使用jQuery append在componentDidMount中附加了html。 这应该解决问题。
var MyComponent = React.createClass({ render: function() { return ( <div> </div> ); }, componentDidMount() { $(ReactDOM.findDOMNode(this)).append(this.props.text); } });
