Javascript 将函数参数传递给react中的另一个组件

我有一个学习反应，被困在这个地方。我正在创建一个应用程序，用户将在其中看到具有不同id和名称的产品列表。我已经创建了另一个组件，产品的细节将在其中打开。我通过onClick函数在addList组件中收集特定产品的id和值。现在我想在DetailList组件中发送这些值，以便显示特定产品的详细信息

像这样的路线图

添加列表->（用户单击产品）->通过获取产品详细信息，将产品的id和名称传递到DetailList组件->打开的DetailList组件

这是我的添加列表组件代码

    export default class Addlist extends Component {
    constructor(props) {
      super(props)
      this.state = {
        posts : []
      }
    }
    
      passToDetailList(id) {
          console.log( id)
    }
    
      async componentDidMount() {
        axios.get('http://localhost:80/get_add_list.php')
            .then(response => {
              console.log(response);
              this.setState({posts: response.data})
            })
            .catch(error => {
              console.log(error); 
            })
        } 
        
        render() {
          const { posts } = this.state;
            //  JSON.parse(posts)
            return (
              <Fragment>
               <div className="container" id="listOfAdd">
                      
              <ul className="addUl">
            {
              posts.map(post => {
                return (
                <li key={post.id}>
                   <div className="row">
                    <div className="col-md-4">
                      <img src={trialImage}  alt=""></img>
                    </div> {/* min col  end */}
                    <div className="col-md-8">
                <b><h2>{post.add_title}</h2></b>
                      
                     

    {/* This button is clicked by user to view detail of that particular product */}
                        <button onClick={() => this.passToDetailList(post.id)}>VIEW</button>
    
                    </div> {/* min col  end */}
                  </div> {/* row end */}
                  
                  </li> 
                );
              })}
                      
     
             </ul>
           </div>{/* container end */}
       </Fragment>
            )
        }
    }

导出默认类Addlist扩展组件{
建造师（道具）{
超级（道具）
此.state={
员额：[]
}
}
密码管理员（id）{
控制台日志（id）
}
异步组件didmount（）{
axios.get（）http://localhost:80/get_add_list.php')
。然后（响应=>{
控制台日志（响应）；
this.setState（{posts:response.data}）
})
.catch（错误=>{
console.log（错误）；
})
} 
render（）{
const{posts}=this.state；
//JSON.parse（posts）
返回(

{
posts.map（post=>{
返回(

{/*最小列结束*/}
{post.add_title}
{/*用户单击此按钮可查看特定产品的详细信息*/}
this.passToDetailList（post.id）}>VIEW
{/*最小列结束*/}
{/*行结束*/}

);
})}

{/*容器结束*/}
)
}
}

您应该通过以下路径传递数据-

<Route path="/details/:id" component={DetailList} /> // router config

passToDetailList(id) {
     this.props.history.push('/details/'+id)
}

---

您应该通过以下路径传递数据：

<Route path="/details/:id" component={DetailList} /> // router config

passToDetailList(id) {
     this.props.history.push('/details/'+id)
}

---

您需要将

id

的

状态提升到
AddList
和
DetailList
之间的公共父级，然后在父级组件中创建一个函数来设置
id
，并通过
props
将
id
和
setId
函数传递给
AddList
组件，然后只需使用
setId
函数在
passToDetailList
函数中设置
id
状态

最后，您可以使用
DetailList
组件中的
id
获取其详细信息

下面是您的
AddList
组件的外观：

export default class Addlist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  passToDetailList(id) {
    this.props.setId(id);
  }

  // The rest of your code
}

export default class DetailList extends Component {
  componentDidMount(){
    // Use the id to fetch its details
    console.log(this.props.id)
  }
}

下面是您的
DetailList
组件的外观：

export default class Addlist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  passToDetailList(id) {
    this.props.setId(id);
  }

  // The rest of your code
}

export default class DetailList extends Component {
  componentDidMount(){
    // Use the id to fetch its details
    console.log(this.props.id)
  }
}

最后是您的
CommonParent
组件：


export default class CommonParent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: ''
    };
    this.setId = this.setId.bind(this);
  }

  setId(id){
    this.setState({
      id
    })
  }

  render(){
    return(
      <>
        <AddList setId={this.setId} />
        <DetailList id={this.state.id} />
      </>
    )
  }
}


导出默认类CommonParent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
id:“”
};
this.setId=this.setId.bind（this）；
}
setId（id）{
这是我的国家({
身份证件
})
}
render（）{
返回(
)
}
}

如果您的组件在组件树中彼此相距很远，您可以使用
react context
或
redux
来处理
id
state
，您需要将
id
的
状态提升到
AddList
和
DetailList
之间的公共父级，然后在父级中创建一个函数组件设置
id
并通过
props
将
id
和
setId
函数传递给
AddList
组件，然后只需使用
setId
函数在
passToDetailList
函数中设置
id
状态

最后，您可以使用
DetailList
组件中的
id
获取其详细信息

下面是您的
AddList
组件的外观：

export default class Addlist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  passToDetailList(id) {
    this.props.setId(id);
  }

  // The rest of your code
}

export default class DetailList extends Component {
  componentDidMount(){
    // Use the id to fetch its details
    console.log(this.props.id)
  }
}

下面是您的
DetailList
组件的外观：

export default class Addlist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  passToDetailList(id) {
    this.props.setId(id);
  }

  // The rest of your code
}

export default class DetailList extends Component {
  componentDidMount(){
    // Use the id to fetch its details
    console.log(this.props.id)
  }
}

最后是您的
CommonParent
组件：


export default class CommonParent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: ''
    };
    this.setId = this.setId.bind(this);
  }

  setId(id){
    this.setState({
      id
    })
  }

  render(){
    return(
      <>
        <AddList setId={this.setId} />
        <DetailList id={this.state.id} />
      </>
    )
  }
}


导出默认类CommonParent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
id:“”
};
this.setId=this.setId.bind（this）；
}
setId（id）{
这是我的国家({
身份证件
})
}
render（）{
返回(
)
}
}

如果您的组件在组件树中彼此相距很远，则可以使用
react context
或
redux
来处理
id
state
我将id作为函数的参数。由于我们不能在path中使用backticks，所以我如何在path.passToDetailList（id）{this.props.history.push（'/details/'+id）}中传递该变量，而导航时您可以传递id。您可以告诉我是否需要按照此方法发送name和id。这是否有效path=“/details/：id/：name是，如果您想了解更多信息，请检查此链接：我将我的id作为函数的参数。由于我们不能在path中使用反勾号，因此如何在path.passToDetailList（id）{this.props.history.push（'/details/'+id）}中传递该变量导航时，您可以传递id。您只需告诉我是否存在这样的情况，如果我想按照此方法发送姓名和id。这是否起作用path=“/details/：id/：name是的，如果您想了解更多信息，请检查此链接：您可以与我共享链接，我可以在其中了解更多信息。那将是很大的帮助。此外，在用户单击按钮后，它会自动指向DetailList组件。我将如何实现这一点。我想我