reactjs - 只能设置 `children`或 `props.dangerouslySetInnerHTML`之一

Question

我正在尝试设置警报 div 的内部 HTML，但收到错误消息:只能设置 'children' 或 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 被注入(inject)到这些标签内，因此空格导致了问题，因为它不是空的。

希望这可以帮助一些人。