时间戳

首页 > 解决方案 > 如何在 React 中创建列表/详细信息视图

javascript - 如何在 React 中创建列表/详细信息视图

问题描述

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

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

导航样机

现在我得到了一个 ItemList 组件，它显示了一个带有 clickhandler 的卡片列表。如何在不更改 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>
  );
 }
}

提前致谢！

标签： javascriptreactjsreact-router

解决方案

你应该有一个父组件（比如 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 来设置所选项目 ID。

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

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

推荐阅读