Question

我正在工作一个reactjs项目，需要构建一个可以更改视图类型的组件。像：该组件具有“以图标查看”和“以列表查看”的功能，并且具有一个用于相互切换的按钮。最好的存档方式。谢谢

编辑：很抱歉造成混淆这正是我想要的。如您所见，我有一个mediaComponent，我希望它可以两种不同的方式显示：作为列表和缩略图。因此，我该如何做出反应。我实际上没有代码。

p / s：我尝试了条件渲染，但是由于渲染方式不同，因此需要使用forceUpdate（）重新渲染组件。看起来真的不太好。因此，我认为还有另一种解决方案。

Answer 1

类似的东西：

class MyComponent extends React.Component {
  state = {
    isList: false
  }
  toggleList = () => this.setState({ isList: !this.state.isList})

  render(){
    const { isList } = this.state;
    return (
      <div>
        {isList ? <ListComponent /> : <GridComponent />}
        <button onClick={this.toggleList}>Toggle</button>
      </div>
    )
  }
}

export default MyComponent;

如何构建React组件可以更改视图类型

1 个答案: