親コンポーネントから子にデータを渡す| React、Redux

Question

私はdoorsItemコンポーネントの私の小道具アイテムにどうやってアクセスできるのだろう？私DoorsItemコンポーネントが前にこのように見えたconst doors = this.props.doors.data.map(item => <DoorsItem item={item} />)

：

class DoorsItem extends Component { 
    render() { 
    return (
     <Grid> 
     <Row> 
      <Col style={{ width: '100%' }}> 
      <ul className="door-list"> 
       <li className="door-flex-container"> 
       <div className="door-flex-item-1"> 
        <h4 className="title-text-container"> 
        {/* How can I use it here? */} 
        </h4> 
       </div> 

：

const DoorsItem = ({ item, customer }) => 
    <Grid> 
    <Row key={item._id}> 
     <Col style={{ width: '100%' }}> 
     <ul className="door-list"> 
      <li className="door-flex-container"> 
      <div className="door-flex-item-1"> 
       <h4 className="title-text-container"> 
       {item.address.street} // Can use 'item' here 

しかし、私はReduxのでそれを接続したかったので、私はこれで終わった親の私のコードはこれです

新しいコード化されたコンポーネントのitem小道具にアクセスするには、どうすればよいのでしょうか？

読んでいただきありがとうございました、ありがとうございました。あなたが<DoorsItem item={item} />をやっているとき

Answer 1

、あなたは、このコンポーネント内であなたがthis.props.itemまたはconst { item } = this.props;より良いようにそれを使用し、後でitemローカル変数を使用することができることを意味しitem小道具を、代入しています。ですから、例えば：the official documentationにそのことについて

const { item } = this.props; return <span>this is the {item} you're looking for</span>

詳しい情報。

通常、クラスベースのコンポーネントを使用する場合、propTypesとdefaultPropsを定義する必要があります。これにより、クラスベースのコンポーネントのpropsをよりよく理解することができ、propsを挿入するための検証が提供されます。詳細情報here（警告：React v15.5から別のパッケージに移動）

最後に、you can use contextが推奨される方法ではありませんが、時には参考になる場合もあります。