在 React 中不向子组件传递值的道具

Question

我正在开发一个简单的食物应用程序。 首先，它会在MenuComponent中显示dishDetails onClick 会将所选菜肴的 Id 传递给名为 getDish(dishdetail) 在这里，我想将 props 或 state 发送到我的 CartComponent，它将显示所选菜肴的详细信息。

问题一 道具没有传递给购物车（未定义的值） 但是如果我在 MenuComponent

中执行 console.log，则会显示 discdetail 名称、id

如何将道具/状态传递给购物车，请指导我。

//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>
        );
    }
}