Question

我正在开发一个简单的食品应用程序。首先，它将在 MenuComponent 中显示盘的详细信息和 onClick ，它将所选菜肴的 Id 传递给名为 getDish（dishdetail） 在这里，我想向我的 CartComponent 发送道具或状态，其中将显示所选菜品的详细信息。

问题1 道具未传递到购物车（不确定值）但是，如果我在 MenuComponent

中进行console.log，则会显示盘名，

请问如何将道具/状态传递给购物车

//Here im binding my function

    class Menu extends Component {
  constructor(props) {
    super(props);
    this.getDish = this.getDish.bind(this);
  }




//This is my getDish function(in which i want to send props to Cart)
    getDish(dishDetail) {
        return (
          <React.Fragment>
            
            <Cart dishdetail={dishDetail}/>  **//undefined in Cart**
            {console.log({dishDetail.name})} **//it is working perfectly**
          </React.Fragment>
        );
      }

工作正常

我从哪里发送数据onClick函数

<button
    onClick={() => this.getDish(this.props.dishes[index])}
  ></button>

Answer 1

所有组件都应通过render方法呈现。并且可以使用状态来控制行为。

//类菜单

constructor(props) {
        super(props);
        this.state = {
            dishDetail: null
        };
        this.getDish = this.getDish.bind(this);
    }

    getDish(selectedDish) {
        this.setState({
            dishDetail: selectedDish
        });
    }

    render() {
        return (
            <>
                <button onClick={() => this.getDish(this.props.dishes[index]])}>Click Me</button>
                {/*Cart is called from render and value passed from state*/}
                <Cart dishdetail={this.state.dishDetail}/> 
            </>
        );
    }

您的购物车类将使用您的新数据重新呈现

class Cart extends React.Component {
    constructor(props) {
        super(props);

    }

    render() {
        console.log('cart', this.props);
        return (
          <div>You added {this.props.dishdetail} to cart</div>
        );
    }
}

不将值传递给React中的子组件

1 个答案: