Question

我是React的新手，正在尝试做一些非常简单的事情。我正在访问父组件中的API。我想访问每个对象的ID，然后将其传递给子组件。我设法使ID显示在URI中，所以/ offers /：id。我尝试了两件事：

在“链接到”中传递ID，然后使用“ props.location.state”或“ this.props.location.state”从我的组件进行访问-无效。
通过参数“ props.match.params”从URI访问ID-无效。

有人可以告诉我我做错了什么吗？

App.js：

export default class App extends Component {

    render() {

        return (
            <div>
                <Switch>
                    <Route exact path='/offers' component={ OffersContainer }/>
                    <Route path='/offers/:id' component={ OfferContainer} />
                </Switch>
            </div>
        );
     }
  }

访问API的父组件：

 <Link to={{
     pathname: `/offers/${offer.id}`,
         state: {
             id: offer.id
         }
 }}> Object path </Link>

我需要ID的子组件：

componentDidMount() {
    const { id } = props.location.state
}

总是返回相同的错误“未定义道具”

Answer 1

在子组件中，由于它是类组件，因此必须使用production mode：

this.props

Answer 2

通过params从URI访问ID之后，设置条件if语句，检查true是否调用了id，如果调用true，则调用该方法以获取ID为param的数据。

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if indexPath.row == 0 {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CreateCell", for: indexPath) as! CreateCell
        //configure your cell here...
        return cell
    } else {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "HomeCell", for: indexPath) as! HomeCell
        cell.list = lists[indexPath.item]
        //configure your cell with list
        return cell
    }
}

override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return lists.count
}

ReactRouter-无法将道具或参数传递给组件的“链接到”

2 个答案: