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数组中渲染出一个组件？例如，我希望标题[1]与主体[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>
    );
  });
}

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

1 个答案: