Question

我有一个像这样的组件树：

-App
--UserList
---UserItem
---UserItem
---UserItem
--User

我无法将用户数据从UserItem传递到User。这就是我所拥有的：

App.js

export default class App extends Component {
  state = { users: [] }

  componentDidMount() {// fetch and setState}

  render() {
    return (
      <BrowserRouter>
        <Route
          exact
          path="/"
          render={() => <UserList users={this.state.users} />}
        />
      </BrowserRouter>
    )
  }

}

UserList.js

export default function({ users }) {
  return (
    <div>
      {users.map(user => (
        <UserItem user={user} key={`${user.id}`} />
      ))}
    </div>
  )

}

这就是问题所在：我想将数据从父组件传递到子User组件，而不必再次从API中获取用户数据。

UserItem.js

export default function({ user }) {
  return (
    <div>
      <Link to="/user">{user.name}</Link>

      <Route path={`/user/${user.name}`} render={() => <User user={user} />} />
    </div>
  )
}

Answer 1

我不确定你要在这里实施什么。当您的路由为UserList时，您的应用会呈现/。 UserList为数组中的每个UserItem呈现user个组件。每个UserItem只会呈现一个特定于每个用户的路由，如果该路由被触发，它将呈现User组件。

但是如果我没弄错的话，如果路由不是UserList，那么/将不会被呈现，所以如果有人访问user/...，内部路由实际上不会存在。

基本上，这个应用程序不会呈现任何内容。

如果您从exact中的路线中删除App关键字，我认为您将获得所需的结果。在这种情况下，打开/user/<USER_NAME>将呈现该用户的User元素。

您的问题是关于通过路径将道具传递到组件中，并且您使用的机制是正确的。

<Route path={...} render={() => <User user={user} />} />

这实际上是对的。请参阅下面链接的代码。在将路线更改为/user/User1时，您会在应用中看到“User1”的名称。

请在此处查看工作代码：https://codesandbox.io/s/18w3393767

Answer 2

您应该在UserItem组件中使用this.props.users

Answer 3

我不确定但是你可以传递下面的道具，这里我传递道具来渲染然后传递给用户组件

Can't update table 'member' in stored function/trigger because it is already used by statement which invoked this stored function/trigger.

Answer 4

export default function({ users }) {
  return (
    <div>
      { this.props.users.map(user => ( 
    //mistake here this.props.users.map not users.map 
        <UserItem user={user} key={`${user.id}`} />
      ))}
    </div>
  )

}

如何在React Router 4中将道具传递给嵌套路由？

4 个答案: