web-dev-qa-db-ja.com

ステートレスな子コンポーネントでの小道具の受け渡し

次のように、すべての反応コンポーネントの小道具をその子コンポーネントに渡すことができることを知っています：

const ParentComponent = () => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...this.props} />
   </div>
)

しかし、子コンポーネントがステートレスである場合、どのようにしてそれらの小道具を取得しますか？クラスコンポーネントである場合は、this.prop.whatever、しかし、引数としてステートレスコンポーネントに何を渡しますか？

const ChildComponent = ({ *what goes here?* }) => (
   <div>
      <h1>Child Component</h1>
   </div>
)
javascriptreactjscomponentsstateless
22
Paulos3000

書くとき

const ChildComponent = ({ someProp }) => (
   <div>
      <h1>Child Component {someProp}</h1>
   </div>
)

childComponentに渡すすべてのプロップから、somePropのみを取得するために構造化しています。 ChildComponentsで使用する小道具の数が、使用可能な小道具の総数の中で数えることができる場合（少数）、読みやすさを提供するため、破壊は良いオプションです。

子コンポーネントのすべての小道具にアクセスしたい場合、引数の周りで{}を使用する必要はなく、props.somePropのように使用できます

const ChildComponent = (props) => (
   <div>
      <h1>Child Component {props.someProp}</h1>
   </div>
)
18
Shubham Khatri

ES6の名前付き引数構文（これは単なる構造化です）を探していますか？

const ChildComponent = ({ propName }) => (
    <div>
     <h1>Child Component</h1>
 </div>
)

const ChildComponent = (props) => ( // without named arguments
    <div>
     <h1>Child Component</h1>
 </div>
)

オプションで、コンポーネントにcontextを指定したかどうかに応じて、関数に2番目の引数があります。

おそらく、 docs へのリンクが役立つと思います。 機能コンポーネントに関する最初の記事で述べたように。コンポーネントに渡される小道具はすべて、機能コンポーネントの最初の引数として渡されるオブジェクトとして表されます。

もう少し先に進むと、jsx内のスプレッド表記についてです。

コンポーネントを記述する場合：

<Child prop1={value1} prop2={value2} />

コンポーネントが受け取るものは、次のような単純なオブジェクトです。

{ prop1: value1, prop2: value2 }

（これはマップではなく、キーとして文字列のみを持つオブジェクトであることに注意してください）。

そのため、JSオブジェクトでspread構文を使用している場合、これは事実上のショートカットです

const object = { key1: value1, key2: value2 }
<Component {...object}/>

と同等です

<Component key1={value1} key2={value2} />

そして実際にコンパイルします

return React.createElement(Component, object); // second arg is props

もちろん、2番目の構文を使用することもできますが、順序に注意してください。より具体的な構文（prop = value）が最後になる必要があります。より具体的な命令が最後になります。

もしあなたがそうするなら ：

<Component key={value} {...props} />

にコンパイルします

React.createElement(Component, _extends({ key: value }, props));

する場合（おそらくすべきこと）

<Component {...props} key={value} />

にコンパイルします

React.createElement(Component, _extends(props, { key: value }));

Extendsは* Object.assign（または存在しない場合はポリフィル）です。

さらに進むには、 オンラインエディター を使用してBabelの出力を観察するために時間をかけることをお勧めします。これは、jsxがどのように機能するか、より一般的にはES5ツールでes6構文を実装する方法を理解するのに非常に興味深いです。

10
adz5A
const ParentComponent = (props) => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...props} />
   </div>
);

const ChildComponent = ({prop1, ...rest}) =>{
  <div>
    <h1>Child Component with prop1={prop1}</h1>
    <GrandChildComponent {...rest} />
  </div>
}

const GrandChildComponent = ({prop2, prop3})=> {
  <div>
    <h1>Grand Child Component with prop2={prop1} and prop3={prop3}</h1>
  </div>
}
4
anand

これは、コードの肥大化を減らすための優れた戦術です。 _ParentClass.js_の例を次に示します。

_import React from 'react';
import SomeComponent from '../components/SomeComponent.js';

export default class ParentClass extends React.Component {
    render() {
        <SomeComponent
            {...this.props}
        />
    }
}
_

<ParentClass getCallBackFunc={() => this.getCallBackFunc()} />を実行する場合、または_<ParentClass date={todaysdatevar} />_を実行する場合、getCallBackFuncクラスで小道具dateまたはSomeComponentを使用できます。

ソース： https://zhenyong.github.io/react/docs/transferring-props.html

1
HoldOffHunger

機能的な親から機能的な子コンポーネントにすべての小道具を渡すために使用する構文を分解する単純なES2015を追加すると思いました。

const ParentComponent = (props) => (
  <div>
    <ChildComponent {...props}/>
  </div>
);

または、複数のオブジェクト（親の小道具とその他のもの）がある場合は、小道具として子に渡します。

const ParentComponent = ({...props, ...objectToBeAddedToChildAsProps}) => (
  <div>
    <ChildComponent {...props}/>
  </div>
);

この分解構文は上記の答えに似ていますが、機能コンポーネントから小道具を渡す方法であり、本当にきれいだと思います。お役に立てば幸いです！

1
Lionel

何らかの理由で、私にとってうまくいくと思われるのは、 上記のシュハムの答え のバリエーションです：

const ChildComponent = props => (
   <div>
      <h1>Child Component {props[0].someProp}</h1>
   </div>
)
0
skube

しかし、子コンポーネントがステートレスである場合、どのようにしてそれらの小道具を取得しますか？

const ChildComponent = ({ *what goes here?* }) => (
   <div>
      <h1>Child Component</h1>
   </div>
)

ChildComponentは名前を保持し、propsは必要に応じて矢印関数構文の引数になります。

 const ChildComponent = props => (
   <div>
     <p>{props.value ? props.value : "No value."}</p>
   </div>
 );

Babel-itの場合、次のようなものが作成されます。

 var ChildComponent = function ChildComponent(props) {
   return React.createElement(
     "div",
     null,
     React.createElement(
       "p",
       null,
       props.value ? props.value : "No value."
     )
   );
 };
0
prosti

これを使用して

const ParentComponent = ({ prop1, prop2, prop3 }) => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...{ prop1, prop2, prop3 }} />
   </div>
);

const ChildComponent = ({ prop1, prop2, prop3 }) =>{
  <div>
    <h1>Child Component with prop1={prop1}</h1>
    <h1>Child Component with prop2={prop2}</h1>
    <h1>Child Component with prop2={prop3}</h1>
  </div>
}
0
ruucm