Question

我正在尝试在新页面上显示可单击对象的详细信息。我尝试了React Router Pass Param to Component中的一些示例，但收效甚微。 “种类”起作用的唯一方法是Alexander Luna建议通过组件中的ID进行访问。但是，尽管这返回了ID号，但我无法访问其他任何值，例如“ title”。我尝试了globalStore，但是错误消息告诉我它未定义。我不确定这是否是我的最佳选择。最终，我希望将整个对象恢复原样，因为我打算在下面的“ D”中使用上下文。

App）我已注释掉我以前的尝试

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Navbar />
        <Switch>
          <Route exact path="/" component={ProductList} />
          <Route path="/cart" component={Cart} />

          <Route exact path="/details/:id" component={Details} />

          {/* <Route exact path="/details/:id" render={(props) => <Details globalStore={globalStore} 
           {...props} /> } /> */}


          {/* <Route exact path="/details/:id" render={(props)=>{ <Details id={props.match.params.id}/>}} 
           /> */}

          <Route component={Default} />

我要呈现的详细信息页面。



import React, { Component } from "react";
export default class Details extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
        <h2>{this.props.match.params.title}</h2>
      </div>

产品页面，我正在使用此链接单击以查看详细信息。


xport default class Product extends Component {
    render() {
        const { id, title, img, price, inCart } = this.props.product;
        return (
            <ProductWrapper className="col-9 mx-auto col-md-6 col-lg-3 my-3">
                <div className="card">
                    <div className="img-container" onClick={() => console.log('you clicked container')}
                    >
                         <Link to={`/details/${ this.props.product.id }`} >
                            <img src={img} alt="product" className="card-img-top" />
                        </Link>

D-这是原始代码的外观，我想使用{title}标签，但不知道是否需要“ value =>”等。

      <ProductConsumer>
        {value => {
          const {
            id,
            company,
            img,
            info,
            price,
            title,
            size,
          } = value.Product;

          return (
            <div className="container py-5">
              {/* title */}
              <div className="row">
                <div className="col-10 mx-auto text-center text-slanted text-blue my-5">
                  <h1>{title}</h1>
                </div>
              </div>

Answer 1

尝试像这样读取构造函数中的参数：

 constructor(props)
    {
        super(props)

        const { match: { params } } = this.props;

        var id = params.id

        
        this.state  = {
            id : id,
        }


    }

，然后从状态中读取ID。如果您想传递整个对象，则可以通过base64中的url发送它，如下所示：

<Link to={`/details/+btoa( this.props.product )} >
      <img src={img} alt="product" className="card-img-top" />
  </Link>

并像前面的代码片段一样在构造函数中接收它，将其解析为使用atob（）函数的字符串，然后解析为json。

Answer 2

您需要一个额外的参数

class _HomePageState extends State<HomePage> 


 with SingleTickerProviderStateMixin {
  final _animatedBoxes = <Widget>[];

  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    );

    super.initState();
  }

  Widget _buildAnimatedBox(Offset position) {
    setState({
      animatedBoxes.add(
        Positioned(
          key: Key(animatedBoxes.length)
          top: position.dy,
          left: position.dx,
          child: MyAnimatedWidget(
          animation: _animationController,
        ),
       }
     );
   }


  Widget build(BuildContext context)
    return GestureDetector(
      onTapUp: (tabDetails) => _buildAnimatedBox(tabDetails)
      child: Stack(
        children: _animatedBoxes
      ),
    );
  }
}

反应路由器访问对象详细信息

2 个答案: