ReactJSの子コンポーネントに動的な小道具を渡すには？

Question

私は動的にそうように2つの構成要素の間にトグルしています：

{this.props.firstname ? (

    <ProfileDropdown 
     firstname = "SomeFirstName" 
    /> 

) : (
    .... 
)} 

しかし、その代わりの"SomeFirstName"を、私は<ProfileDropdown />コンポーネントにfirstname小道具の値としてthis.props.firstnameを渡したいです。それ、どうやったら出来るの？

Answer 1

Basic Rule：

我々がカーリー ブレースでそれをラップすることにより、JSXのあらゆるJavaScript expressionを埋め込むことができます。

JSX内部の任意の式を指定するには、我々は、{}を使用し、それを使用し、その内側にthis.props.firstNameを配置する必要があります。

このようにそれを書く：

<ProfileDropdown 
    firstname = {this.props.firstname} 
/> 

は、DOCを確認してください：Embedding Expressions in JSX

更新：

をこの例をチェックしてください、あなたはより良いアイデアを得るでしょう：

{this.props.firstname ? (  //expression so {} 
    <ProfileDropdown    //jsx 
     firstname = {1 == 1 ?  //here {} to put expression inside JSX 
      <div> {1+1} </div> //inside div(JSX), so use {} again to put expression 1+1 
      : <div>World</div> 
     } 
    /> 
)