ReactJS issue:() => vs function()

Question

Следовал по учебнику ReactJS со своего сайта.

var Comment = React.createClass({ 
    render: function() { 
    return (
     <div className="comment"> 
     <h2 className="commentAuthor"> 
      {this.props.author} 
     </h2> 
     {this.props.children} 
     </div> 
    ); 
    } 
}); 

var CommentList = React.createClass({ 
    render:() => { 
    return (
     <div className="commentList"> 
     <Comment author="Pete Hunt">This is one comment</Comment> 
     <Comment author="Jordan Walke"> This is *another* comment</Comment> 
     </div> 
    ); 
    } 
}); 

var CommentForm = React.createClass({ 
    render:() => { 
    return (
     <div className="commentForm"> 
     Comment Form 
     </div> 
    ); 
    } 
}); 

var CommentBox = React.createClass({ 
    render:() => { 
    return (
     <div className="commentBox"> 
     <h1>Comments</h1> 
     <CommentList /> 
     <CommentForm/> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <CommentBox />, 
    document.getElementById("content") 
); 

Однако, если использовать стрелки обозначения в первом компоненте Комментарии, а именно:

(* PARAMS *) => {}

вместо нормальной функции декларации обозначений, а именно:

функция (* Титулы *) {}

интерпретатор хром выложит следующее сообщение об ошибке:

Uncaught TypeError: Не удается прочитать свойство «реквизита» неопределенных

Может кто-нибудь пролить свет на этот вопрос?

Answer 1

Функции стрелки не свяжутся this. Поэтому, если вы создаете функцию render как функцию стрелки, то this не будет привязан к текущему компоненту.

Итак, для render и других методов, принадлежащих вашему компоненту, и вам нужен доступ к компоненту как this, вам необходимо использовать реальные функции. Вы можете использовать функции стрелок для вложенных функций (и там имеет смысл использовать их).