将函数参数传递给反应中的另一个组件

Question

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

类似的路线图

添加列表->（用户单击产品）->产品的ID和名称传递给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>
            )
        }
    }

Answer 1

你应该通过路由传递数据 -

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

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

然后在 DetailList 组件中，可以通过 - 访问值

console.log(this.props.match.params.id) - //here is the passed product Id 

Answer 2

您需要将id 的state 提升为AddList 和DetailList 之间的共同父级，然后在父组件中创建一个函数来设置id 并传递id 和@987654328 @ 函数到你的 AddList 组件通过 props ，然后只需使用 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
}

这是您的DetailList 组件的外观：

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} />
      </>
    )
  }
}

如果您的组件在组件树中彼此相距很远，您可以使用react context 或redux 来处理id 状态