Question

我有问题。问题是我需要以某种方式从ReadProducts组件获取产品ID并将其传递给ReadOne组件，因为我无法获得功能中的ID并且无法显示产品。我怎么能这样做？

结构如下：

此组件是产品的父级，获取所有产品并获得一个

  class Product extends Component {
      render() {
        return (
          <Switch>
            <Route path='/products' component={ReadProducts} />
            <Route path='/products/:id' component={ReadOne} />
          </Switch>
        )
      }
    };

这个是从api获得所有产品

   class ReadProducts extends Component {
      constructor(props) {
        super(props);
        this.state = {
          products: []
        }
        this.getProduct = this.getProduct.bind(this);
      }

      render() {
        const { products } = this.state;

        return(
            <ul>
              {
                products.map(product => (
                  <li key={product.id}>
                    <Link to={`/products/${product.id}`}><button onClick={???}>{product.name}</button></Link>
                  </li>
                ))
              }
            </ul>
        )
      }

    }

这是为了阅读一个产品

class ReadOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 0,
      ...
    }
  }

  render() {
    return(
      <div className='pew'>
        {this.state.name}, {this.state.id}...
      </div>
    )
  }
}

问题是我需要以某种方式从ReadProducts组件中获取产品ID并将其传递给ReadOne组件，因为我无法在功能中获取ID并且无法显示产品。我怎么能这样做？

Answer 1

在Product.js中添加此内容

我们设置了id的初始状态。

我们在Product.js中添加setProductId，因为这是id的状态必须在ReadOne.js中使用它。

  constructor(props) {
   super(props);
    this.state={
      id:' ',
    }
}
setProductId(id) => {
  this.setState({ id:id })
}

然后将id作为支持传递给ReadOne组件。

  <Route path='/products/:id' render={()=> <ReadOne id={this.state.id}/>}>

这是id的getter，将其添加到ReadProducts.js

中

showProduct = (id) => {
  getProduct(id);
}

<Link to={`/products/${product.id}`}><button onClick={this.showProduct(product.id)}>{product.name}</button></Link>

现在，您可以在Product.js

中的任何组件中使用id

来自react-router文档的快速说明。

当您使用组件（而不是渲染或子项，下面）时 router使用React.createElement从中创建一个新的React元素给定的组件。这意味着如果你提供内联函数组件prop，您将在每次渲染时创建一个新组件。这个导致现有组件卸载和新组件安装而不是仅仅更新现有组件。

在react-router中的子节点之间传递数据

1 个答案:

来自react-router文档的快速说明。