如何在 React 中创建列表/详细视图答案

【问题标题】：How to create a List/Detail View in React如何在 React 中创建列表/详细视图
【发布时间】：2021-01-15 02:58:11
【问题描述】：

我需要在 React 中为 Web 应用程序实现一种主/详细视图。由于应用程序应该集成到 CakePHP 应用程序中，我不能使用 React Router 来处理路由（因为 CakePHP 会处理它们）。

我有一个项目列表，想要浏览它们，显示一个详细视图。项是嵌套的，因此有子项可供导航。

现在我有一个 ItemList 组件，它显示带有点击处理程序的卡片列表。如何在不更改 url 的情况下更改视图？

ItemList 组件看起来像：

class ItemList extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
          itemList: []
      }
  }

  componentDidMount() {
    fetchItems(...)
  }
    
  render() {
    return(
      <div>
        {this.state.itemList.map(item => (
          <Item key={item.id} item={item} />
        ))}
      </div>
    );
  }
}

项目组件看起来像：

class Item extends React.Component {
constructor(props) {
  super(props);

  this.state = {
    item: props.item,
  }
}

handleClick = () => {
  // How to navigate to another Component?
}

render() {
  return(
    <div>
      <div className="card my-2" onClick={this.handleClick}>
        <div className="card-body">
          <h5 className="card-title">{this.state.item.title}</h5>
          <p className="card-text">{this.state.item.description}</p>
        </div>
      </div>
    </div>
  );
 }
}

提前致谢！

【问题讨论】：

你可以例如使当前视图处于状态。在渲染方法中，您根据currentView 状态值的值渲染不同的东西。单击时更改状态值

标签： javascript reactjs react-router

【解决方案1】：

你应该有一个父组件（比如 MainView），它有一个状态（比如 selectedItemId）。

class MainView extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
          selectedItemId: [null]
      }
  }

  componentDidMount() {
    
  }
    
  render() {
    return(

      {!selectedItemId && (<ItemList />)}
      {selectedItemId && (
         <ItemDetail id={selectedItemId} />
       )}
    );
  }
}

如您所见，它根据 selectedItemId 状态值呈现不同的组件。

在ItemList的handleClick内部调用父MainView的setState来设置选中的item ID。

因此，在 MainView 的 render() 函数中使用条件渲染，您可以在未选择任何项目时渲染 ItemList，在您选择一个项目时渲染 ItemDetail。

我不太习惯 ES6 语法组件，所以我的代码可能在某处出错，但你可以得到消息；）

【讨论】：