React Tutorial: TypeError: Невозможно прочитать свойство «реквизита» неопределенного

Question

Я решил изучить React и начал с официального учебника. Все хорошо, пока я не до такого состояния моего кода:

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

var CommentForm = React.createClass({ 
    render:() => { 
    return (
     <div className="commentForm"> 
     Hello, world! I am a comment form; 
     </div> 
    ); 
    } 
}); 

var Comment = React.createClass({ 
    rawMarkup:() => { 
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 
    return {__html: rawMarkup}; 
    }, 

    render:() => { 
    return (
     <div className="comment"> 
     <h2 className="commentAuthor"> 
      {this.props.author} 
     </h2> // <--- [[[[[[ ERROR IS HERE ]]]]]] 
     <span dangerouslySetInnerHtml={this.rawMarkup} /> 
     </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 yo</Comment> 
     </div> 
    ); 
    } 
}); 

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

Когда я пытаюсь запустить его, я получаю следующее сообщение об ошибке в Devtools: «TypeError: Не удается прочитать свойство„реквизита“неопределенных» и отладчик останавливается на отмеченной строке (см. код). Когда я нажимаю «this» в {this.props.author}, я получаю предварительный просмотр объекта, у которого есть свойство «реквизита» и все ...

Я действительно новичок в реагировании, так что это, наверное, что-то глупое , но кто знает ...

Надеюсь, вы, ребята, можете помочь!

Приветствия, H.

Answer 1

Используйте функцию декларации (render() {} или render: function {}) вместо функции стрелки render:() => {}

var Comment = React.createClass({ 
    rawMarkup() { 
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); 
    return {__html: rawMarkup}; 
    }, 

    render() { 
    return (
     <div className="comment"> 
     <h2 className="commentAuthor"> 
      {this.props.author} 
     </h2> 
     <span dangerouslySetInnerHtml={this.rawMarkup} /> 
     </div> 
    ); 
    } 
}); 

Example

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous.

Answer 2

У меня было то же самое сообщение об ошибке «не может читать свойства «реквизита» неопределенного «, , но по другой причине: когда this вызывается из функции, javascript не может достичь переменной, потому что this находится в наружном пространстве. (Примечание: Я был в ES5)

В этом случае просто хранить this в другой переменной, до функции (в рамках компонента): var that = this;

Тогда вы сможете звоните that.props из внутри функция.

Надеюсь, это поможет другим людям, у которых было это сообщение об ошибке.

Подробный пример ниже:

  render: function() { 
 
       var steps = []; 
 
       var that = this; // store the reference for later use 
 
       var count = 0; 
 
       this.props.steps.forEach(function(step){ 
 
        steps.push(<Step myFunction={function(){that.props.anotherFunction(count)}}/>); // here you are 
 
        count +=1; 
 
       }); 
 

 
       return(
 
        <div>{steps}</div> 
 
        </div> 
 
       ) 
 
      }