反应本机渲染组件 或者使用状态

Question

我想将列表交替呈现为网格中的两列。我打算在我的组件状态下使用标志变量来执行此操作，并在每次返回CardDetail时更改其值。

我注释掉了this.changeState()语句，因为它们似乎没有按预期工作。

请帮我弄清楚这是，我是 React/React Native 的新手。提前谢谢。

renderAlbums() {
    return this.state.albums.map(album =>{
      this.rend2(album)
    }
    );
  }
rend2(album){
if(this.state.flag === 0)
{
  //this.changeState();
  return (<CardDetail key={album.title} album={album}  />);
}
else
{
 //this.changeState;
return (<View />);
} 
}
changeState(){
  if(this.state.flag === 0)
{
this.setState({flag:1});
}
else
{
  this.setState({flag:0})
}
}
  render() {
    console.log(this.state);
    return (
      <ScrollView>
      <Grid>
      <Col>{this.renderAlbums()}</Col>
        <Col>{this.renderAlbums()}</Col>
      </Grid>
      </ScrollView>
    );
  }
}

Answer 1

我认为在这种情况下您不需要更改状态。只需将参数传递给您的renderAlbums()方法，并使用它来选择列表中的所有其他专辑：

renderAlbums(col) {
  return this.state.albums.map( (album, index) => {
    if (index % 2 == col)
      return (<CardDetail key={album.title} album={album}  />);
    else
      return (<View/>);
  } );
}

然后在您的render()方法中：

render() {
  return (
    <ScrollView>
      <Grid>
        <Col>{this.renderAlbums(0)}</Col>
        <Col>{this.renderAlbums(1)}</Col>
      </Grid>
    </ScrollView>
  );
}

此代码尚未经过测试，但它应该可以工作。

Answer 2

也许稍微改变一下你的方法，同时呈现两列。因此，您可以在要呈现的列之间切换 CardDetail .

return (
  <ScrollView>
    <Grid>
      {this.state.albums.map((album, index) => 
        <View key={index}>
          <Col>{index % 2 === 0
            ? <CardDetail key={album.title} album={album}  />
            : <View />
          }</Col>
          <Col>{index % 2 !== 0
            ? <CardDetail key={album.title} album={album}  />
            : <View />
          }</Col>
        </View>
      }
    </Grid>
  </ScrollView>