react-router-v4 - 使用组件页面上的 URL 来通过 React Router 识别和传递来自父级的状态数据？

Question

我使用 react 路由器。在我的州，我有许多可以通过 ID 识别的电视节目。在节目页面上，我需要加载特定节目的数据，将节目 ID 与 URL 的末尾相匹配。

我的状态看起来像这样，但有更多节目:

shows: [
  {
    id: 1318913
    name: "Countdown"
    time: "14:10"
  },
  {
    id: 1318914
    name: "The News"
    time: "15:00"
  }
]

在 App.js 中:

<BrowserRouter>
  <Switch>
    <Route
      exact
      path="/"
      render={() => {
        return <Table shows={this.state.shows} />;
      }}
    />
    <Route
      path="/show/:showID"
      render={() => {
        return <Show />;
      }}
    />
    <Route component={FourOhFour} />
  </Switch>
</BrowserRouter>;

React Router 使 URL 的 :showID 部分在节目页面上可用。所以我可以将整个节目状态传递给 Show 组件，然后从 url 中找到正确的节目。但是我想这效率低下？

我想知道我是否应该通过 App.js 中的 ID 查找节目，并且只将正确的节目传递给 Show 组件。这是更好的做法/更有效吗？

这是我的表格组件:

class Table extends Component {
  render(props) {
    return (
      <table className="table table-striped table-bordered table-hover">
        <tbody>
        {
          this.props.shows.map((item)=>{
            return <TableRow
              name={item.name}
              time={item.time}
              key={item.eppisodeId}
              eppisodeId={item.eppisodeId}
              img={item.img}
            />
          })
        }
        </tbody>
      </table>
    )
  }
}

这是我的 TableRow 组件:

class TableRow extends Component {
  render(props) {
    const image = this.props.img !== null ?
      <img src={this.props.img} alt={this.props.name} />
      : null;
    const showUrl = '/show/' + this.props.eppisodeId;
    return (
      <tr className="tableRow">
        <td className="tableRow--imgTd">{image}</td>
        <td><Link to={showUrl}>{this.props.name}</Link></td>
        <td className="tableRow--timeTd">{this.props.time}</td>
      </tr>
    )
  }
}

Answer 1

正如我在您的问题中看到的，您正在使用 Link导航。考虑到您还想通过链接发送数据，您可以将对象传递给它而不是 string path如 React-router docs 中所述, 所以你可以用 state object 传递演出信息在 TableRow组件如

const {name, time, episodeId, img} = this.props;
<Link to={{pathname:showUrl, state: {show: {name, time, episodeId, img }}}}>{this.props.name}</Link>

现在您可以在 Show 中检索此信息组件作为

this.props.location.state && this.props.location.state.name

您需要注意的另一件事是，您需要将 Prop 传递给渲染函数

 <Switch>
       <Route
      exact
      path="/"
      render={(props) => {
        return <Table shows={this.state.shows} {...props}/>;
      }}
    />
    <Route
      path="/show/:showID"
      render={(props) => {
        return <Show {...props}/>;
      }}
    />
    <Route component={FourOhFour} />
  </Switch>

现在上述解决方案只有在您从 App 内导航时才有效，但如果您更改 URL 它将不起作用，如果您想让它更健壮，您需要将数据传递给 show 组件，然后进行优化在生命周期函数中

你会 。做它喜欢

<Switch>
       <Route
      exact
      path="/"
      render={(props) => {
        return <Table shows={this.state.shows} {...props}/>;
      }}
    />
    <Route
      path="/show/:showID"
      render={(props) => {
        return <Show shows={this.state.shows} {...props}/>;
      }}
    />
    <Route component={FourOhFour} />
</Switch>

然后在 Show 组件中

class Show extends React.Component {
    componentDidMount() {
        const {shows, match} = this.props;
        const {params} = match;
        // get the data from shows which matches params.id here using `find` or `filter` or whatever you feel appropriate

    }
    componentWillReceiveProps(nextProps) {
        const {match} = this.props;
        const {shows: nextShows, match: nextMatch} = nextProps;
        const {params} = match;
        const {params: nextParams} = nextMatch;
        if( nextParams.showId !== params.showId) {
            // get the data from nextProps.showId and nextShows here 
        }

    }
}

然而，这是像 redux 这样的库的地方。和 reselect 很有用。使用 Redux 您的数据 shows将在一个公共(public)商店中，您可以在任何组件中访问它， reselect为您提供创建选择器的选项，该选择器被内存以获得适当的 show来自 shows 的数据，从而不再重复相同的计算。请探索这些并检查您是否发现它们非常适合您的项目。