Question

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

are assumed to be

虽然我不清楚我应该在哪里执行此操作。我在DoctorList和DoctorItem中尝试过但是没有用。所以我在App组件中设置了Route，我可以选择一个医生，然后渲染DoctorView组件并显示match.params prop就好了。但是如何将选定的医生数据提供给DoctorView？我可能比现在更努力。这是我的代码：

App.jsx

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

DoctorList.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>
  );
}

DoctorItem.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>
    );
  }
}

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，但这感觉就像许多不必要的步骤。

Answer 1

但是如何将选定的医生数据提供给DoctorView？

请注意，拥有package main import ( "fmt" "golang.org/x/tour/pic" ) func Pic(dx, dy int) [][]uint8 { //HERE I DYNAMICALLY CREATE THE ARRAYS BASED ON WHAT I WAS TAUGHT PREVIOUSLY //I UNDERSTAND THAT TECHNICALLY THESE MAY BE SLICES NOT ARRAYS ... //AND THUS MAYBE POINT SOMEWHERE AND DON'T ACTUALLY STORE ALL THE DATA (???) yy := make([][]uint8, dy) xx := make([]uint8, dx) for y := range yy { for x := range xx { xx[x] = uint8((y)) // FOR SIMPLICITY I MADE PATTERN ROW x = y } yy[y] = xx //THIS OUTPUT IS CORRECT; ROW OF 0's, ROW OF 1's, ROW OF 2's, ETC fmt.Println(y, yy[y]) } for y := range yy { //THIS OUTPUT IS INCORRECT; ALL 255! //IT POPULATED ALL ROWS W/ VALUES FROM THE LAST LOOP fmt.Println(y, yy[y]) } return yy } func main() { pic.Show(Pic) }和/items等路径会创建一个可能首先登陆详细信息页面的方案。

你是：

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

b）只获取该项目的信息吗？

两种答案都不“正确”，但在一天结束时，您有三种可能的信息：

1）项目ID

2）单个项目

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

无论您想要显示项目的完整详细信息，都需要通过道具访问该项目。将所有项目详细信息放在网址中将是艰巨的，加上它将使得无法处理情况A.

由于您正在使用redux，因此从网址中的标识符中抓取项目的详细信息非常有意义

/items/:id

^似乎有太多额外的步骤吗？

Answer 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} />}
  />

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

希望这会对某人有所帮助

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

2 个答案: