Question

我正在尝试设置警报div的内部HTML，但收到错误消息：Can only set one of 'children' or props.dangerouslySetInnerHTML'.

为什么会这样？

function alertContent(alert) { return {__html: alert.text} }

const Alerts = ({ alerts=[{level: 'warning', text:'<p>Warning message!</p>'}], onDismiss }) => (
    <div className="alerts">
        {alerts.map(alert =>
            <Alert
                bsStyle={alert.level}
                key={alert.id}
                onDismiss={onDismiss}
                dangerouslySetInnerHTML={alertContent(alert)} 
                ></Alert>
        )}
    </div>
)

Answer 1

我在React应用程序中有此错误消息。

我的问题是我的代码如下

<p dangerouslySetInnerHTML={{ __html:stringContainingHtml}}> </p>

我的问题是<p> </p>标签中的空格-由于html注入了这些标签内，因此该空格引起了问题，因为它不是空的。

希望这对某些人有帮助。

Answer 2

这是因为dangerouslySetInnerHTML只能应用于一个元素。在您的情况下，<Alert/>是由多个孩子组成的复杂元素。话虽如此，BS Alert组件确实接受HTML：

<Alert bsStyle="warning">
  <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</Alert>

Answer 3

如果没有内部HTML，则必须关闭html标记

<Alert dang...={} />

代替<Alert></Alert>

Answer 4

我自己解决了这个问题。在递归渲染组件时，必须将使用dangerouslySetInnerHTML的组件部分分离到另一个组件中，然后在递归渲染的组件中使用该组件。

Answer 5

解决方案，您必须制作一个单独的组件来渲染您正在危险使用的元素。.....

例如：

const RenderHTML = (props) => (<span dangerouslySetInnerHTML={{__html:props.HTML}}></span>)



YourData.map((d,i) => {
    return <RenderHTML  HTML={d.YOUR_HTML} />
})

只能设置`children`或`props.dangerouslySetInnerHTML`中的一个

5 个答案: