javascript - 使用 PropTypes 从父类调用方法

Question

我有一个简单的父->子关系，想通过子组件从父组件调用一个方法。

我的子组件是一个按钮网格，其中每个按钮都有一个名称。看起来像这样。

class ButtonsGrid extends React.Component {

    clicked = (product) => {
        this.props.clicked(product);
    }

    render() {   
        return (
            <div>
                <GridList cellHeight={50} cols={10}>
                    {this.props.list.length > 0 ? this.props.list.map(product => {
                        return (
                            <Button ref='productButton' style={{width: '200px', border: '1px solid'}} variant="raised" color="primary" onClick={() => this.props.clicked(product)}>
                                <div 
                                    style={{fontSize:'12px', display: 'flex', justifyContent: 'center', textAlign:'center'}}>
                                        {product.name}
                                </div>
                            </Button>
                        );
                    }) : ''}
                </GridList>
            </div>
        );
    } 
}

ButtonsGrid.propTypes = {
    clicked: PropTypes.func.isRequired,
}

export default ButtonsGrid;

父级呈现 ButtonsGrid 组件，并且应该在每次按下按钮时记录按钮的名称。

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      list: [
        {"name":"test1"},
        {"name":"test2"},
      ]
    };
  }

  clicked = (product) => {
    console.log(product.name);
  }
  render() {
    return (
      <div className="container-full padding-0">
        <div className="row">
          <div className="col-sm-3">
            <ButtonsGrid list={this.state.list}/>
          </div>
          <div className="col-sm-9" style={{paddingLeft:0, paddingRight:0}} clicked={(product) => this.clicked(product)}>
            <ButtonsGrid list = {this.state.list} />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

This是我得到的错误。知道我做错了什么吗？

Answer 1

您永远不会将 clicked 属性传递给 ButtonsGrid。试试这个:

<ButtonsGrid list={this.state.list} clicked={this.clicked} />