[英]ReactJS - How do I render out a component from several prop arrays?
I am trying to learn ReactJS by building a simple web application that makes several ajax calls to a mock api and rendering the results onto the page. 我正在尝试通过构建一个简单的Web应用程序来学习ReactJS,该应用程序对模拟api进行多次ajax调用并将结果呈现到页面上。
So far, I can successfully make an ajax call to the mock api via the appropriate use of componentDidMount. 到目前为止,我可以通过适当使用componentDidMount成功地对模拟api进行ajax调用。 The response text is a JSON object, where I store several arrays in state, for example: 响应文本是一个JSON对象,我在其中存储了多个处于状态的数组,例如:
var newTitle = this.state.title.slice();
newTitle.push(myObject[x].title);
this.setState({title:newTitle})
var newBody = this.state.body.slice();
newBody.push(myObject[x].body);
this.setState({body:newBody})
myObject is the object storing the parsed JSON response. myObject是存储已解析的JSON响应的对象。
I can successfully render out one array (ie title) by doing the following: 我可以通过执行以下操作成功渲染一个数组(即标题):
<FeedController title={this.state.title}/>
class FeedController extends Component{
render({
return(
{this.props.title.map(function(element,i){
return <FeedItem title={element} />
})}
);
});
}
class FeedItem extends Component{
render({
return(
<div>
Title: {this.props.title}
</div>
);
});
I loop through the title state and display a FeedItem with each iteration. 我遍历标题状态并在每次迭代中显示FeedItem。 My problem and question, however, is how do I render out a component from several prop arrays? 但是,我的问题是,如何从几个prop数组中渲染出一个组件? For example, I would like title[1] to be displayed alongside body[1] etc. 例如,我希望title [1]与body [1]等一起显示。
I presume I would do something where I pass title and body as props, but I can't work out how to map both and also render out the results. 我想我会做些将标题和正文作为道具传递的事情,但是我无法弄清楚如何同时映射和渲染结果。 Ideally, my FeedItem component will look like the following: 理想情况下,我的FeedItem组件将如下所示:
class FeedItem extends Component{
render({
return(
<div>
Title: {this.props.title}
<br />
Body: {this.props.body}
<br /><br />
</div>
);
});
}
If you know that the arrays will be the same length, you can use the same index to get matching data. 如果知道数组的长度相同,则可以使用相同的索引来获取匹配的数据。
<FeedController title={this.state.title} body={this.state.body}/>
class FeedController extends Component{
render({
return(
{this.props.title.map(function(element,i){
return <FeedItem title={element} body={this.props.body[i]} />
})}
);
});
}
class FeedItem extends Component{
render({
return(
<div>
Title: {this.props.title}
<br />
Body: {this.props.body}
<br /><br />
</div>
);
});
}
Alternatively, you can merge the data before you pass it in to the FeedController. 或者,您可以合并数据,然后再将其传递给FeedController。
render(){
let data = this.state.title.map( (title, i) => {
return {
title: title,
body: this.state.body[i]
}
}
return <FeedController data={data} />
}
class FeedController extends Component{
render({
return(
{this.props.data.map( (data,i) => {
return <FeedItem title={data.title} body={data.body} />
})}
);
});
}
class FeedItem extends Component{
render({
return(
<div>
Title: {this.props.title}
<br />
Body: {this.props.body}
<br /><br />
</div>
);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.