ReactJS - 如何从多个 prop 数组中渲染出一个组件？

Question

我正在尝试通过构建一个简单的 Web 应用程序来学习 ReactJS，该应用程序对模拟 api 进行多次 ajax 调用并将结果呈现到页面上。

到目前为止，我可以通过适当使用 componentDidMount 成功地对 mock api 进行 ajax 调用。响应文本是一个 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 是存储解析后的 JSON 响应的对象。

我可以通过执行以下操作成功渲染出一个数组（即标题）：

<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>
    );
  });

我遍历标题状态并在每次迭代时显示一个 FeedItem。然而，我的问题和疑问是如何从几个 prop 数组中渲染出一个组件？例如，我希望 title[1] 与 body[1] 等一起显示。

我想我会做一些我将标题和正文作为道具传递的事情，但我不知道如何映射两者并渲染结果。理想情况下，我的 FeedItem 组件如下所示：

class FeedItem extends Component{
  render({
    return(
      <div>
      Title: {this.props.title}
      <br />
      Body: {this.props.body}
      <br /><br />
      </div>
    );
  });
}

Answer 1

如果您知道数组的长度相同，则可以使用相同的索引来获取匹配的数据。

<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>
    );
  });
}

或者，您可以在将数据传递到 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>
    );
  });
}