私はこのようなコンポーネントツリーを持っています：
-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>
)
}
ここで何を実装しようとしているのかわかりません。アプリは、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
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加