материал-интерфейс с использованием данных в формате JSON на одной странице приложении

Question

мне нужно инициализировать компонент реагировать с некоторыми данными JSON, но не знаю, как сделать это с помощью материала-интерфейс:

Это, как я хотел бы сделать в реагирует:

var CommentList = React.createClass({ 
    render: function() { 
    var commentNodes = this.props.data.map(function (comment) { 
     return (
     <Comment author={comment.author}> 
      {comment.text} 
     </Comment> 
    ); 
    }); 
    return (
     <div className="commentList"> 
     {commentNodes} 
     </div> 
    ); 
    } 
}); 

React.render(
    <CommentBox url="comments.json" />, 
    document.getElementById('content') 
); 

но я теперь с помощью одного приложения страницы с material-ui и маршрутами, где все страницы загружаются по реагирующим, но я не знаю, как передать JSON для каждой отдельной страницы. Я хотел бы использовать его следующим образом, где я отправить comments.json в мой родной компонент:

<Route name="root" path="/" handler={Main}> 
    <Route name="home" url="comments.json" handler={Home} /> 
    <DefaultRoute handler={Home}/> 
</Route> 

Можно ли добиться этого каким-то образом?

Answer 1

Самый простой способ сделать это было бы загрузить json в методе componentWillMount используя что-то вроде jquery ajax:

var CommentList = React.createClass({ 
    componentWillMount: function() { 
    $.get('comments.json').done(function (json) { 
     this.setState({comments: json}); 
    }.bind(this)); 
    }, 
    render: function() { 
    var commentNodes = this.state.comments.map(function (comment) { 
     return (
     <Comment author={comment.author}> 
      {comment.text} 
     </Comment> 
    ); 
    }); 
    return (
     <div className="commentList"> 
     {commentNodes} 
     </div> 
    ); 
    } 
}); 

Вы могли бы, очевидно, сделать вызов Ajax в вашем Main компонента и передавать данные через качестве реквизита но вы получите эту идею.