Question

我有一个学习反应，并停留在这个地方。我正在创建一个应用程序，用户将在其中看到具有不同ID和名称的产品列表。我创建了另一个组件，其中将打开产品的详细信息。我通过onClick函数在addList组件中收集特定产品的ID和值。现在我想在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

您需要将state的{{1}}提升到id和AddList之间的公共父对象，然后在父组件中创建一个函数来设置{{1} }，然后通过DetailList将id和id函数传递给setId组件，然后使用AddList函数将props状态设置为setId功能。

最后，您可以在id组件中使用passToDetailList来获取其详细信息

因此，id组件的外观如下：

DetailList

这是您的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状态

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

2 个答案: