React Router 4 将道具传递给动态组件答案

【问题标题】：React Router 4 Pass props to dynamic componentReact Router 4 将道具传递给动态组件
【发布时间】：2018-07-17 04:26:38
【问题描述】：

我有一个医生列表，我正在尝试在选择时动态呈现详细信息页面。我看到大多数人建议通过 Route 组件传递道具，如下所示：

<Route path={`${match.url}/:name`}
  component={ (props) => <DoctorView doctor={this.props.doctors} {...props} />}
  />

虽然我不清楚我应该在哪里执行这个。我在 DoctorList 和 DoctorItem 中尝试过，但没有奏效。所以我在 App 组件中设置了 Route，我可以选择一个医生，然后渲染 DoctorView 组件并很好地显示 match.params 道具。但是如何将选定的医生数据获取到 DoctorView？我可能比它应该做的更难。这是我的代码：

App.jsx

const App = () => {
  return (
    <div>
      <NavigationBar />
      <FlashMessagesList />
      <Switch>
        <Route exact path="/" component={Greeting} />
        <Route path="/signup" component={SignupPage} />
        <Route path="/login" component={LoginPage} />
        <Route path="/content" component={requireAuth(ShareContentPage)} />
        <Route path="/doctors" component={requireAuth(Doctors)} />
        <Route path="/doctor/:name" component={requireAuth(DoctorView)} />
      </Switch>
    </div>
  );
}

DoctorList.jsx

class DoctorList extends React.Component {
  render() {
    const { doctors } = this.props;
    const linkList = doctors.map((doctor, index) => {
      return (
        <DoctorItem doctor={doctor} key={index} />
      );
    });

    return (
      <div>
        <h3>Doctor List</h3>
        <ul>{linkList}</ul>
      </div>
    );
  }
}

DoctorItem.jsx

const DoctorItem = ({ doctor, match }) => (
  <div>
    <Link
      to={{ pathname:`/doctor/${doctor.profile.first_name}-${doctor.profile.last_name}` }}>
      {doctor.profile.first_name} {doctor.profile.last_name}
    </Link>
  </div>
);

DoctorView.jsx

const DoctorItem = ({ doctor, match }) => (
  <div>
    <Link
      to={{ pathname:`/doctor/${doctor.profile.first_name}-${doctor.profile.last_name}` }}>
      {doctor.profile.first_name} {doctor.profile.last_name}
    </Link>
  </div>
);

我可以通过 Redux 访问医生列表，我可以连接组件，引入列表并比较 id，但这感觉像是很多不必要的步骤。

【问题讨论】：

你想要整个医生对象对吗？不只是名字？
正确。 Doctors 是从外部 API 请求接收到的医生对象数组。我想显示所选医生对象的所有详细信息。我能够在 DoctorList 组件中呈现所有细节，但我想在单独的视图中显示它们。

标签： reactjs react-router-v4 react-router-dom dynamic-routing

【解决方案1】：

但是如何将选定的医生数据获取到 DoctorView？

请记住，使用 /items 和 /items/:id 之类的路径会导致您可能首先登陆详细信息页面。

你：

a) 无论如何都要获取所有项目，因为您可能会返回列表页面？

b) 只获取该项目的信息？

这两个答案都不是“正确的”，但归根结底，您有三个可能的信息：

1) 商品编号

2) 单个项目

3) 项目列表（可能包含也可能不包含详细信息页面所需的所有信息）

无论您想在何处显示项目的完整详细信息，它都需要通过道具访问该项目。将所有项目详细信息放在 url 中会很费力，而且会导致无法执行情况 A。

由于您使用的是 redux，因此从 url 中的标识符中获取项目的详细信息非常有意义

export default 
  connect((state, props) => ({
    doctor: state.doctorList.find(doctor => 
      doctor.id === props.match.params.id
    )
  }))(DoctorView)

^ 看起来是不是有太多额外的步骤？

【讨论】：

感谢您的回答，现在比较 id 确实有意义。请原谅我天真，因为我正在努力学习 React/Redux，我不确定如何实现您提供的示例。我是创建一个容器、比较 id 并将匹配的医生传递给视图组件还是在我的问题中发布的 DoctorView 中比较它们？
感谢 Azium！我能够收到匹配的医生的对象。你是绝对正确的，根本没有额外的步骤。非常感谢！

【解决方案2】：

虽然上面的答案完美地解决了这个问题，但我只想补充一点，react-router 不建议使用带有 component 的内联函数

而不是做：

<Route path={`${match.url}/:name`}
  component={ (props) => <DoctorView doctor={this.props.doctors} {...props} />}
  />

你应该像这样使用它：

 <Route path={`${match.url}/:name`}
  render={ (props) => <DoctorView doctor={this.props.doctors} {...props} />}
  />

这将防止在每次挂载时创建相同的组件，而是使用相同的组件并相应地更新状态。

希望这会对某人有所帮助

【讨论】：