HTMLを含む場合とそうでない場合がある小包を扱う

Question

私は、うまく設計されたボックス、すなわちDIVの束の中にテキストを表示する単純なプレゼンテーションコンポーネントを持っています。私のコンポーネントは、3つの小道具：header,displayTextおよびisHtmlを期待しています。

時々、displayTextに単純なテキストをプロポーズし、ハイパーリンクなどのHTMLを含むものを渡す必要があります。

例えば、私はHello World!または<a href="http://www.google.com">Click for Google</a>をdisplayText小道具に渡すことができます。 HTMLをdisplayTextに渡すと、isHtmlはTRUEに設定されます。

私がいる問題はPropTypeがdisplayTextためstringに設定されていることですが、私は、HTMLタグでテキストを送信する場合、それはobjectになり、私は小道具がobjectを受け取ったがstringを期待していたというエラーを取得します。

このscnearioをどうすれば処理できますか？

私のコンポーネントは次のようになります。

const MyComponent = ({ header, displayText, isHtml }) => { 

    const renderHtml =() => { 

     return { __html: displayText } 
    } 

    return (
     <div className="my-fancy-classes"> 
      <span className="some-more-fancy-classes">{header}</span> 
      {isHtml 
       ? <div className="some-class" dangerouslySetInnerHTML={renderHtml()} /> 
       : <div className="some-class">{displayText}</div> 
      } 
     </div> 
    ); 
} 

MyComponent.propTypes = { 

    header: PropTypes.string.isRequired, 
    displayText: PropTypes.string.isRequired, 
    isHtml: PropTypes.bool.isRequired 
}; 

ここでHTMLを送信するのIF私のコンポーネント宣言が親JSXコンポーネントの内部のようになります。

getMyText() { 

    let displayText = ""; 
    if(this.props.isHtml) 
     displayText = '<a href="http://www.google.com">Click for Google</a>'; 

    return displayText; 
} 

... 
<div> 
    <MyComponent header="Title" displayText={this.getMyText()} isHtml={true} /> 
</div> 

私は単純なテキストを送信していた場合、それはなります次のようになります。

<div> 
    <MyComponent header="Title" displayText={this.props.someProp} isHtml={false} /> 
</div> 

Answer 1

https://facebook.github.io/react/docs/typechecking-with-proptypes.htmlあなたは、レンダリングすることができます何のためにPropTypes.nodeを使用する必要があります。

//レンダリングすることができる何か：数値、文字列、要素またはこれらの型を含む配列 //（またはフラグメント）。 optionalNode：PropTypes.node、

ので、あなたがPropTypes複数の種類を持っているしたい場合は、また、編集

1つの小道具に

---

をoneOfTypeを使用することができ

MyComponent.propTypes = { 
    header: PropTypes.string.isRequired, 
    displayText: PropTypes.node.isRequired, 
    isHtml: PropTypes.bool.isRequired 
}; 

を持っているでしょう

あなただけの直接JSXを返す場合のように、あなたも、など、dangerouslySetInnerHTMLを行う必要がないかもしれません。

getMyText() { 
    let displayText = ""; 
    if (this.props.isHtml) 
    // Remove quotes around html 
    displayText = <a href="http://www.google.com">Click for Google</a>; 

    return displayText; 
} 

-

const MyComponent = ({ header, displayText, isHtml }) => { 
    return (
    <div className="my-fancy-classes"> 
     <span className="some-more-fancy-classes">{header}</span> 
     <div className="some-class">{displayText}</div> 
    </div> 
); 
} 

Answer 2

を使用すると、文字列型であるためにあなたのdisplayTextの小道具を定義しているので、それは勝ちましたhtmlオブジェクトでは機能しません。このように定義する必要があります。

displayText: PropTypes.any.isRequired, 

ここでanyを指定すると、displayText propに任意のタイプのコンテンツを渡すことができます。