複数の一般的なキーと値の小道具を含むオブジェクトがあり、それをjsxに渡します。このようなもの:
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />
私はこれを個々の小道具を渡すように機能させたい:
<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>
これは可能ですか?
これは可能ですか?
はい、なぜあなたはそれが不可能だと思うのですが、あなたが送信している方法は正しくありません。
<MyJsx commonProps />
の意味:
<MyJsx commonProps={true} />
したがって、デフォルトで値を指定しない場合、true
が使用されます。オブジェクトを渡すには、次のように記述する必要があります。
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />
更新:
オブジェクトがあり、すべてのプロパティを個別の小道具として渡したい場合は、次のように記述します。
<MyJsx {...commonProps} />
これを行うには spread operator を使用できます。
You can simply do <MyJsx {...commonProps} />
これで、commonPropsにある個々のプロパティがすべて、MyJsxに個々のプロップとして送信されます
次のように二重中括弧を使用する必要があります。
messages={{tile:'Message 1'}}
または、多くのオブジェクトを渡すには:
messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]}
それは中括弧内の単純なJS構文です。
最終的なコンポーネントは次のようになります
<Chat title="Some str" messages={[{title:'Message 1', name: 'Andrew'}, {title:'Message 2', name: 'Greg'}]} />
あなたは2つの方法でオブジェクトとして小道具を渡すことができます:
const commonProps = {myProp1: 'prop1'、myProp2: 'prop2'};
1.スプレッド演算子の使用:-
<MyJsx {...commonProps} />
2.その小道具を単に渡す:-
<MyJsx commonProps = {commonProps ? commonProps : true} />
何故なの?
<MyJsx propName: {commonProps} />
を実行するだけです。