だけ `children`または` props.dangerouslySetInnerHTML`

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

これは、dangerouslySetInnerHTMLが1つの要素にしか適用できないために発生します。あなたの場合、<Alert/>は、複数の子供で構成された複雑な要素です。つまり、BS AlertコンポーネントはHTMLを受け入れます：

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

Answer 2

私はこの問題を自分で解決しました。 コンポーネントを再帰的にレンダリングする場合、dangerouslySetInnerHTMLが使用されているコンポーネントの部分を別のコンポーネントに分けて、再帰的にレンダリングしているコンポーネントでそのコンポーネントを使用する必要があります。