web-dev-qa-db-ja.com

オブジェクトを小道具としてjsxに渡す

複数の一般的なキーと値の小道具を含むオブジェクトがあり、それをjsxに渡します。このようなもの：

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />

私はこれを個々の小道具を渡すように機能させたい：

<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>

これは可能ですか？

reactjsjsxreact-props
30
Sabrina

これは可能ですか？

はい、なぜあなたはそれが不可能だと思うのですが、あなたが送信している方法は正しくありません。

<MyJsx commonProps />の意味：

<MyJsx commonProps={true} />

したがって、デフォルトで値を指定しない場合、trueが使用されます。オブジェクトを渡すには、次のように記述する必要があります。

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />

更新：

オブジェクトがあり、すべてのプロパティを個別の小道具として渡したい場合は、次のように記述します。

<MyJsx {...commonProps} />
47
Mayank Shukla

これを行うには spread operator を使用できます。

You can simply do <MyJsx {...commonProps} />

これで、commonPropsにある個々のプロパティがすべて、MyJsxに個々のプロップとして送信されます

16
G_S

次のように二重中括弧を使用する必要があります。

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'}]} />
4
sharp

あなたは2つの方法でオブジェクトとして小道具を渡すことができます：

const commonProps = {myProp1： 'prop1'、myProp2： 'prop2'};

1.スプレッド演算子の使用：-

<MyJsx {...commonProps} />

2.その小道具を単に渡す：-

<MyJsx commonProps = {commonProps ? commonProps : true} />
2
sneha

何故なの？

<MyJsx propName: {commonProps} />を実行するだけです。

0
Amanshu Kataria