ReactJSコンポーネント関数this and props undefined

Question

これは簡単な質問ですが、私は新しいスターターです。チュートリアルや優秀なオンラインコースを受講して、私は最初の適切なReactJSプロジェクトを試しています。私もES6とJSXに噛まれましたので、それが問題になるかもしれません。基本的には、配列を使って渡された配列を使用してデータ構造上のログインを実行するサブ関数を呼び出して、関数内でonClickという名前の関数を渡したいが、 "this"は関数では定義されていない配列.map関数に渡されます...

import React from 'react'; 
import { Link, Location } from 'react-router'; 

import moment from 'moment'; 
import _ from 'lodash'; 

import IBoxTools from '../common/iboxTools'; 

class Timesheets extends React.Component { 

    componentDidMount() { 
     $('.timesheets li button').tooltip(); 
    } 

    render() { 

     const showTimesheets = function (timesheets) { 

      if (timesheets && timesheets.length) { 
       return (
        <div> 
         <ul className="list-group timesheets"> 
          {timesheets.map(timesheetCandidateRow, this)} 
         </ul> 
         <Link to="/timesheets" className="btn btn-primary">View all timesheets</Link> 
        </div> 
       ); 
      } 
      else { 
       return (
        <div> 
         <p>There are currently no timesheets requiring action</p> 
         <a className="btn btn-primary" href="#">View all timesheets</a> 
        </div>); 
      } 
     } 

     const timesheetCandidateRow = function (timesheetCandidate) { 
      var candidateName = timesheetCandidate.candidate.forename + ' ' + timesheetCandidate.candidate.surname; 
      return (
       <li className="list-group-item" key={timesheetCandidate.id}> 
        <div> 
         <h4 className="list-group-item-heading">{candidateName}<br /><small>{timesheetCandidate.candidate.title}</small></h4> 
         <table className="table table-condensed"> 
          <tbody> 
           {timesheetCandidate.timesheets.map(timesheetRow, this)} 
          </tbody> 
         </table> 
        </div> 
       </li> 
      ); 
     } 

     const timesheetRow = function (timesheet) { 
      var timesheetDate = moment(timesheet.date).format('dddd Do MMM'); 
      if (timesheet.startTime) { 
       timesheetDate = timesheetDate + ' ' + timesheet.startTime + ' to ' + timesheet.endTime; 
      } 
      return (
       <tr key={timesheet.id}> 
        <td>{timesheetDate}</td> 
        <td>{timesheet.charge}</td> 
        <td style={{ width: 70 }}> 
         <div className="btn-group"> 
          <button className="btn btn-success btn-xs" onClick={this.props.onAccept} title="Accept" data-toggle="tooltip" data-placement="bottom"><i className="fa fa-check"></i></button> 
          <button className="btn btn-danger btn-xs" onClick={this.props.onReject} title="Reject" data-toggle="tooltip" data-placement="bottom"><i className="fa fa-close"></i></button> 
         </div> 
        </td> 
       </tr> 
      ); 
     } 

     return (
      <div className="ibox float-e-margins"> 
       <div className="ibox-title"> 
        <h5> 
         <span className="fa-stack"> 
          <i className="fa fa-square-o fa-stack-2x"></i> 
          <i className="fa fa-check fa-stack-1x"></i> 
         </span> Timesheets 
           </h5> 
        <IBoxTools /> 
       </div> 
       <div className="ibox-content"> 
        {showTimesheets(this.props.timesheets)} 
       </div> 
      </div> 
     ); 
    } 

} 

Timesheets.propTypes = { 
    timesheets: React.PropTypes.array, 
    onAccept: React.PropTypes.func.isRequired, 
    onReject: React.PropTypes.func.isRequired 
} 

export default Timesheets; 

したがって、renderメソッド内のconst内では "this"は定義されていません。助けてください？

ありがとうございました。

Answer 1

this、あなたはため

const showTimesheets = (timesheets) => {...} 

同じ矢印の機能を使用することができますおよび他の内部機能を含む。

矢印の機能を使用します。また、ヴラドによって投稿バインド・ソリューションを使用することができますが、それはあなたがあなたの関数は（呼び出し、バインドを使用して、または適用されます）正しいthisを渡すと呼ばれていることを確認する必要があり

Answer 2

代わりの通常のparamとしてこのを渡して、あなたのコンテキストスイッチのすべての3ヶ所で正しい呼び出しオブジェクトにあなたの機能を結合してみてください：「ロックダウン」するには

timesheets.map(timesheetCandidateRow.bind(this)) 

timesheetCandidate.timesheets.map(timesheetRow.bind(this)) 

showTimesheets.bind(this)(this.props.timesheets) 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind