React JS - 他の小道具の地図に異なる小道具を渡す方法

Question

質問：このparams配列を<Post />コンポーネントに渡して、data配列をマップするにはどうすればよいですか？ 私の状態には2つの配列があります。 this.state = { data: [], params: [] };と私はPostList.jsと呼ばれるファイルに小道具を介してそれらを渡しました。これは、マップ機能で（データ配列からの）すべてのポストをレンダリングし、以下を参照：

//PostList.js 
//.....Removed for brevity.... 
render(){ 
    // Tried let params = this.props.params; HERE 
    let socialPostNodes = this.props.data.map(socialPost => { 
     // Tried let params = this.props.params; HERE 
     return (
      <Post 
       //I need params = { this.props.params } HERE 
       messageNumber = { socialPost.message.indexOf('', 1) } 
       message={ socialPost.message} 
       uniqueID={ socialPost['_id'] } 
       key={ socialPost['_id'] } > 
       { socialPost.message } 
      </Post> 
     ) 
    }); 
//.....removed for brevity...... 

私はので、私はPost.jsファイル内でそれらを参照することができ<Post />にthis.props.paramsを配置する必要がありますが、私はしないでくださいどのように知って、答えを見つけることができません。

render()の後に、またはreturn(...の前にさらにlet params = this.props.params;を追加しようとすると、小道具は取得されません。つまり、<Post params={ params }... </Post>を入力することはできません。

質問：このparamsアレイを<Post />コンポーネントに渡して、data配列をマップするにはどうすればよいですか？

あなたは迷っている場合： を - 配列 内のデータがあります - ダウン親コンポーネントから渡すと 成功しました - Post.jsが正常にファイルI 必要なものありません - 私はreactJS に新しいです - 私は、ファイルの多くを置くことができる、ちょうど聞く ありがとう！

EDITそれは、ポストメッセージ内の{{会社}}を探して、あなたが入力したときthisスコープが失われている文字列 '同社

class Post extends Component { 
    loadInParams() { 
     let socialMessage = this.props.message; 
     if (socialMessage.indexOf("{{company}}") >= 0) { 
      let newSocialMessage = socialMessage.replace("{{company}}", 'company') 
      return newSocialMessage 
     } else { 
      let newSocialMessage = socialMessage; 
      return newSocialMessage 
     } 
    } 

    render() { 
     return (
      <div> 
       <h4> Post { this.props.messageNumber } </h4> 
       <strong>Post Template: </strong> { this.props.message } 
       <br /> 
       <strong>Ready Post: </strong> 
       { this.loadInParams() } 
      </div> 
     ) 
    } 
} 

Answer 1

に置き換えファイル 追加Post.js map！しかし、map関数を使用すると、thisコンテキストを提供するための2番目の引数を指定できます。

など。

this.props.data.map(socialPost => { 
    ... 
}, this); 

、第2引数に渡すと、あなたはthis.props.paramsが今の値を持つことを意味し、親スコープのthisにアクセスできるようになります。