私はこのような名前のJSONファイルを持っています data.json
{
"link_template": "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit={num-results}&country={country-code}",
"links": {
"alternate": "http://www.rottentomatoes.com/movie/box-office/",
"self": "http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json?limit=20&country=us"
},
"movies": [
{
"abridged_cast": [
{
"characters": [
"Dominic Toretto"
],
"id": "162652472",
"name": "Vin Diesel"
},
{
"characters": [
"Brian O'Conner"
],
"id": "162654234",
"name": "Paul Walker"
},
{
"characters": [
"Louie Tran"
],
"id": "162684066",
"name": "Tony Jaa"
},
{
"characters": [
"Deckard Shaw"
],
"id": "162653720",
"name": "Jason Statham"
},
{
"characters": [
"Luke Hobbs"
],
"id": "770893686",
"name": "Dwayne \"The Rock\" Johnson"
}
],
"alternate_ids": {
"imdb": "2820852"
},
"critics_consensus": "",
"id": "771354922",
"links": {
"alternate": "http://www.rottentomatoes.com/m/furious_7/",
"cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/cast.json",
"reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/reviews.json",
"self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922.json",
"similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771354922/similar.json"
},
"mpaa_rating": "PG-13",
"posters": {
"detailed": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
"original": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
"profile": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg",
"thumbnail": "http://resizing.flixster.com/pVDoql2vCTzNNu0t6z0EUlE5G_c=/51x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/14/11181482_ori.jpg"
},
"ratings": {
"audience_rating": "Upright",
"audience_score": 88,
"critics_rating": "Certified Fresh",
"critics_score": 82
},
"release_dates": {
"theater": "2015-04-03"
},
"runtime": 140,
"synopsis": "Continuing the global exploits in the unstoppable franchise built on speed, Vin Diesel, Paul Walker and Dwayne Johnson lead the returning cast of Fast & Furious 7. James Wan directs this chapter of the hugely successful series that also welcomes back favorites Michelle Rodriguez, Jordana Brewster, Tyrese Gibson, Chris \"Ludacris\" Bridges, Elsa Pataky and Lucas Black. They are joined by international action stars new to the franchise including Jason Statham, Djimon Hounsou, Tony Jaa, Ronda Rousey and Kurt Russell.",
"title": "Furious 7",
"year": 2015
},
{
"abridged_cast": [
{
"characters": [
"Oh"
],
"id": "770702500",
"name": "Jim Parsons"
},
{
"characters": [
"Tip"
],
"id": "351524959",
"name": "Rihanna"
},
{
"characters": [
"Captain Smek"
],
"id": "162654836",
"name": "Steve Martin"
},
{
"id": "162652167",
"name": "Jennifer Lopez"
}
],
"alternate_ids": {
"imdb": "2224026"
},
"critics_consensus": "",
"id": "771315639",
"links": {
"alternate": "http://www.rottentomatoes.com/m/home_2015/",
"cast": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/cast.json",
"reviews": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/reviews.json",
"self": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639.json",
"similar": "http://api.rottentomatoes.com/api/public/v1.0/movies/771315639/similar.json"
},
"mpaa_rating": "PG",
"posters": {
"detailed": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
"original": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
"profile": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg",
"thumbnail": "http://resizing.flixster.com/LO7V_j1xUTlsbwzIyCINBxBm5qE=/54x80/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/17/11181778_ori.jpg"
},
"ratings": {
"audience_rating": "Upright",
"audience_score": 69,
"critics_rating": "Rotten",
"critics_score": 47
},
"release_dates": {
"theater": "2015-03-26"
},
"runtime": 93,
"synopsis": "When Oh, a loveable misfit from another planet, lands on Earth and finds himself on the run from his own people, he forms an unlikely friendship with an adventurous girl named Tip who is on a quest of her own. Through a series of comic adventures with Tip, Oh comes to understand that being different and making mistakes is all part of being human. And while he changes her planet and she changes his world, they discover the true meaning of the word HOME. (c) Fox",
"title": "Home",
"year": 2015
}
]
}
これは私のReactJSコードであり、そのJSONファイルからデータを取得してReactコンポーネントにバインドすることを目的としています
var CastMember=React.createClass({
render:function(){
<div className="castmember">
</div>
}
});
var Cast=React.createClass({
render:function(){
var cast_members=this.props.cast.map(function (member){
return (
<CastMember member={member}/>
);
});
return (
<div className="cast">
{cast_members}
</div>
);
}
});
var Movie=React.createClass({
render:function(){
return (
<div className="movieBox">
<Cast cast={this.props.movie.abridged_cast}/>
</div>
);
}
});
var MovieList=React.createClass({
render:function(){
var movieNodes=this.props.movies.map(function (movie){
return (
<Movie movie={movie}/>
);
});
return (
<div className="movieList">
{movieNodes}
</div>
);
}
});
var DataBlock = React.createClass({
getInitialState:function() {
return {data:{
movies:[
{abridged_cast:[]}
]
}}
},
componentDidMount:function() {
var a=this;
$.ajax({
url:this.props.url,
dataType:'json',
cache:false,
success:function(data){
this.setState({data:data})
}.bind(this)
});
},
render: function() {
return (
<div className="dataBlock">
<h1>Movie List</h1>
<MovieList movies={this.state.data.movies}/>
</div>
);
}
});
React.render(
<DataBlock url="data.json"/>,
document.getElementById('content')
);
私はこのデモを下から上に順番に行ってきました。moviesJSONファイルからリストを取得してレンダリングすることができましたがabridged_cast、それぞれを取得するのに行き詰まりましたmovie
render機能Cast私はレンダリングに置き換える場合コンポーネント、{this.props.cast}、すべてが表示されます。しかし、それらをコンポーネントのmemberプロパティにマッピングできCastMemberませんでした。上記のコードは何も表示しませんでした。私のコードの何が問題になっていますか？
var CastMember=React.createClass({
render:function(){
<div className="castmember">
</div>
}
});
CastMemberデータmemberをCastMember->に渡すときに、コンポーネントはその小道具を処理する必要があります<CastMember member={member}/>。
これは助けになるでしょう：
var CastMember=React.createClass({
render:function(){
return (
<div className="castmember">
{this.props.member}
</div>
);
}
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加