Question

我想知道如何将单击的项目ID传递给React中的路径吗？

这是我的父组件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android">

</androidx.constraintlayout.widget.ConstraintLayout>

当我单击li元素中的某个元素时，我有一个list元素，我得到了该元素的export default class ParentComponent extends Component { state = { data: null }; render() { return ( <section> <Row> <ul> <li>....<li> .... <ul> </Row> <Row> <ChildComponent rowData={this.state.data} /> </Row> </section> ); } }。到目前为止，一切正常。

我想知道如何以及在哪里可以动态地向childComponent传递此项目ID（例如path参数）。

我在id中的ID，我想创建该ID并将其传递给组件的路由

url类似于：this.state.data.id

因此，在单击到li元素时，路线将转到子组件，并且子组件将具有单击项的ID。

我正在使用react-router

我的app.js中的路线路径：

details/id

Answer 1

您可以使用url参数。请检查以下网址https://reacttraining.com/react-router/web/example/url-params

<Switch>
    <Route path="/login" /> 
    <Route exact path="/callback" />
    <Route  path="/about" component={About} /> 
    <Route  path="/details/:id" component={DynamicComp} />
</Switch>

var DynamicComp = ({match})=>({<div>{match.params.id}</div>})

动态路由与反应

1 个答案: