Как передать опору в компонент?

Question

Я начал работу с Reactjs и получил некоторые проблемы с получением демо-версии. Если вас интересует, у меня есть весь проект open sourced.

У меня есть searchBox, который содержит SearchForm. После того, как пользователь отправит поиск, SearchResult должен показать json с сервера.

React.render(
    <SearchBox url="http://127.0.0.1:5000/search"/>, 
    document.getElementById('search-golden-facilities') 
); 

var SearchBox = React.createClass({ 
    handleSearchSubmit: function(search_param){ 
     $.ajax({ 
      url: this.props.url, 
      dataType: 'json', 
      type: 'POST', 
      data: search_param, 
      success: function(data){ 
       this.setState({data:data}); 
      }.bind(this), 
      error: function (xhr, status, err) { 
       console.error(this.props.url, status, err.toString()); 
      }.bind(this) 
     }); 
    }, 
    getInitialState: function() { 
     return {data: [{"x": "huh"}]}; 
    }, 
    render: function(){ 
     return (
      <div className="searchBox"> 
       SID <SearchForm onSearchSubmit={this.handleSearchSubmit} /> 
      </div> 
     ) 
    } 
}); 

var SearchForm = React.createClass({ 
    handleSubmit: function (e) { 
     e.preventDefault(); 
     var sid = this.refs.sid.getDOMNode().value.trim(); 
     if(!sid) { 
      return; 
     } 
     this.props.onSearchSubmit({sid: sid}); 
     this.refs.sid.getDOMNode().value = ''; 
     return; 
    }, 
    render: function() { 
     return (
      <form className="searchForm" onSubmit={this.handleSubmit}> 
       <input type="search" placeholder="Enter SID" ref="sid"/> 
       <input type="submit" value="Search"/> 
      </form> 
     ); 
    } 
}); 

Где это становится проблематичным является SearchResult:

React.render(
    <SearchResult data='{"x":"test"}'/>, 
    document.getElementById('result-golden-facilities') 
); 

var SearchResult = React.createClass({ 
    render: function(){ 
     var resultRows = this.props.data.map(function(result){ 
      return (
       <p>{result.x}</p> 
      ); 
     }); 
     return (
      <div className="searchResult"> 
       {resultRows} 
      </div> 
     ); 
    } 
}); 

Я получаю яваскрипт ошибки в консоли Chrome:

Uncaught TypeError: undefined is not a function

Кажется, что data не определена. Я не понимаю, почему, поскольку я определяю его в исходном состоянии.

var resultRows = this.props.data.map(function(result){ 

Любые предложения?

Answer 1

Когда вы обертываете свои свойства одной цитатой, React отправляет их в компонент как строку. Это лучше использовать {:

React.render(
    <SearchResult data={ {"x":"test"} } />, 
    document.getElementById('result-golden-facilities') 
); 

или для лучшей читаемости:

var data = { x: 'test' }; 
React.render(
    <SearchResult data={ data } />, 
    document.getElementById('result-golden-facilities') 
); 

Другой вопрос, в вашем коде, как вы используете .map(). Вы пытаетесь использовать собственный метод отображения javascript для объекта, которого не существует. Либо вы должны изменить свои данные в массив:

var data = [{ x: 'test' }]; 

или просто делают:

var SearchResult = React.createClass({ 
    render: function(){ 
     return (
      <div className="searchResult"> 
       {this.props.data.x} 
      </div> 
     ); 
    } 
});