Question

我遇到了React propTyoes的问题。我创建了一个需要2个道具才能工作的组件，你可以在下面的代码中看到。

当我在 App 文件中使用该组件时，只传递1个prop，没有“stateSidebarVisible”，它不会从反应中抛出任何错误/警告... （我读了很多关于NODE_ENV生产/开发的东西，我在我的节点中搜索了process.env并且顺便找到了NODE_ENV变量）。任何线索？

FFMainHeader

export default class FFMainHeader extends React.Component {
  render() {...}
}

FFMainHeader.propTypes = {
  stateSidebarVisible: React.PropTypes.bool.isRequired,
  handleSidebarChange: React.PropTypes.func.isRequired
};

应用

这是我调用FFMainHeader组件的地方。

export default class FFMainApp extends React.Component {
    .......
    render() {
        return (
            <div id="FFMainApp">
                <FFMainHeader
                    handleSidebarChange={this.onSidebarChange} />
                <FFMainSidebar />
            </div>
        );
    }
}

修改

export default class FFMainHeader extends React.Component {

  constructor(props) {
    super(props);
    this.clickSidebarChange = this.clickSidebarChange.bind(this);
  }

  clickSidebarChange(e) {
    e.preventDefault();
    (this.props.stateSidebarVisible) ?
      this.props.stateSidebarVisible = false :
      this.props.stateSidebarVisible = true;
    this.props.handleSidebarChange(this.props.stateSidebarVisible);
  }

  render() {
    return (
      <header id="FFMainHeader">
        <a href="#" onClick={this.clickSidebarChange}>
          Abre/Fecha
        </a>
      </header>
    );
  }
}

FFMainHeader.propTypes = {
  stateSidebarVisible: React.PropTypes.bool.isRequired,
  handleSidebarChange: React.PropTypes.func.isRequired
};

React propTypes错误未显示

0 个答案: