Question

首先，“ store.js”中存在状态。

 @observable projectState = {
    projects: [{
                 "id": "abcd",
                 "title": "good"
              },
              {
                 "id": "edf",
                 "title": "bad"
              }]
  };

第二，当单击每个项目时，将按project.id跟随每个参数URL。

@inject("Project")
@observer
class ProjectList extends Component {
  render() {
    const { Project } = this.props;

    return (
      <div className="project-list section">
        {Project.projectState.projects &&
          Project.projectState.projects.map(project => {
            return (
              <Link to={"/project/" + project.id} key={project.id}>
                <ProjectSummary project={project} />
              </Link>
            );
          })}
      </div>
    );
  }
}

这是我的路线，它使用ProjectDetails组件。

<Route path="/project/:id" component={ProjectDetails} />

我的最终目标是显示标题，取决于ProjectDetails Component的'id'。
例如，当我在仪表板{“ id”：“ abcd”，“ title”：“ good”}上单击此json数据时，它遵循'project / abcd'。

@inject("Project")
@observer
class ProjectDetails extends Component {
  render() {
    return (
      <div>
        <h3>{title}</h3>
      </div>
    );
  }
}

所选项目如何自动传递到ProjectDetail组件？结果，这只是简单的仪表板示例... 你能给我一些建议吗？

如何制作每个状态数据取决于Mobx在ReactJS中的查询参数

0 个答案: