React-如何在道具中传递HTML标签？

没有人建议使用react-html-parser的原因吗？这似乎是处理导入的HTML的一种好方法，而不必危险地做

https://www.npmjs.com/package/react-html-parser

已经使用jQuery追加在componentDidMount中追加了html。这应该可以解决问题。

 var MyComponent = React.createClass({
    render: function() {

        return (
           <div>

           </div>
        );
    },
    componentDidMount() {
        $(ReactDOM.findDOMNode(this)).append(this.props.text);
    }
});

这个问题已经有很多答案，但是我做错了与此相关的事情，我认为值得分享：

我有这样的事情：

export default function Features() {
  return (
    <Section message={<p>This is <strong>working</strong>.</p>} />
  }
}

但是按摩的时间比那更长，所以我尝试使用如下方法：

const message = () => <p>This longer message is <strong>not</strong> working.</p>;

export default function Features() {
  return (
    <Section message={message} />
  }
}

我花了一段时间才意识到我在函数调用中缺少（）。

无法运作

<Section message={message} />

工作中

<Section message={message()} />

也许对您有帮助，就像对我一样！

将文本道具类型设置为any并执行以下操作：

<MyComponent text={
    <React.Fragment>
        <div> Hello, World!</div>
    </React.Fragment>
    } 
/>

例

是的，您可以通过将混合数组与字符串和JSX元素一起使用来实现。 参考

<MyComponent text={["This is ", <strong>not</strong>,  "working."]} />

您还可以在组件上使用一个函数来将jsx传递给props。喜欢：

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

});

在React v16.02中，您可以使用片段。

<MyComponent text={<Fragment>This is an <strong>HTML</strong> string.</Fragment>} />

更多信息：https : //reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

您可以通过2种我知道的方式来做到这一点。

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

您可以危险地使用SetInnerHTML

只需将html作为普通字符串发送

<MyComponent text="This is <strong>not</strong> working." />

并在JSX代码中进行渲染，如下所示：

<h2 className="header-title-right wow fadeInRight"
    dangerouslySetInnerHTML={{__html: props.text}} />

如果要渲染用户输入的数据，请小心。您可能是XSS攻击的受害者

这里是文档：https : //facebook.github.io/react/tips/dangerously-set-inner-html.html

实际上，可以采用多种方法。

您想在道具中使用JSX

您可以简单地使用{}使JSX解析参数。唯一的限制与每个JSX元素相同：它必须仅返回一个根元素。

myProp={<div><SomeComponent>Some String</div>}

最好的可读方法是创建一个函数renderMyProp，该函数将返回JSX组件（就像标准渲染函数一样），然后只需调用myProp = {this.renderMyProp（）}

您只想将HTML作为字符串传递

默认情况下，JSX不允许您从字符串值呈现原始HTML。但是，有一种方法可以做到这一点：

myProp="<div>This is some html</div>"

然后可以在组件中像这样使用它：

<div dangerouslySetInnerHTML=myProp={{ __html: this.renderMyProp() }}></div>

请注意，此解决方案可以在跨站点脚本伪造攻击中“打开”。还请注意，您只能呈现简单的HTML，不能呈现JSX标签或组件或其他奇特的东西。

数组方式

作为响应，您可以传递一个JSX元素数组。这意味着：

myProp={["This is html", <span>Some other</span>, "and again some other"]}

我不推荐这种方法，因为：

• 它将创建一个警告（缺少键）
• 不可读
• 这并不是真正的JSX方式，它更像是一种hack，而非预期的设计。

孩子们的方式

为了完整起见添加它，但为了做出反应，您还可以使所有“位于”组件内部的子项。

因此，如果我采用以下代码：

<SomeComponent>
    <div>Some content</div>
    <div>Some content</div>
</SomeComponent>

然后，这两个div将在SomeComponent中以this.props.children的形式提供，并可以使用标准{}语法进行呈现。

当只有一个HTML内容要传递给组件时，此解决方案是完美的（想象一个Popin组件仅将Popin的内容作为子组件）。

但是，如果您有多个内容，则不能使用子级（或至少需要将其与此处的其他解决方案结合使用）

对我来说，它通过在道具儿童中传递html标签而起作用

<MyComponent>This is <strong>not</strong> working.</MyComponent>


var MyComponent = React.createClass({

   render: function() {
    return (
      <div>this.props.children</div>
    );
   },