defaultProps 覆盖 delevert 道具答案

【问题标题】：defaultProps overrides delevert propsdefaultProps 覆盖 delevert 道具
【发布时间】：2015-09-20 18:48:37
【问题描述】：

我有一个简单的反应组件，我发送一个 bool prop 给 <MenuItem active={notificationMenu.shown} />
但是 prop 在组件内部不会改变，即使我在元素上传递它也总是正确的

@Radium
export class MenuItem extends Component {
  styles = {
    hidden: {
      listStyleType: "none"
    }
  }
  static propTypes = {
    active: React.PropTypes.bool.isRequired
  }
  static defaultProps = {
    active: true
  }
  render() {
    if(this.props.active) {
      return (
        <li style={this.props.style}>
          {this.props.children}
        </li>
      )
    } else {
      return (
        <li style={[this.styles.hidden, this.props.style]}>&nbsp;</li>
      )
    }
  }
}

【问题讨论】：

很难理解为什么没有看到它的父母，你确定你将 props.active 传递为false，你从渲染方法登录了吗？
是的，我已经尝试登录渲染并且它没有改变，并且在某些情况下我传递了 false 但它没有反映在组件中
好的，为了让调试更容易添加一些文本到li，也许css更改不明显。
事情是孩子们被渲染（所以很容易区分）。

标签： javascript reactjs ecmascript-2016

【解决方案1】：

Menu 父级迭代 this.props.children 并且没有使用扩展操作 {...this.props} 的问题。所以我将道具覆盖为 undefined 然后 defaultProps 开始了。

romseguy 的回答让我想到再次检查所有父组件

【讨论】：

【解决方案2】：

可能是 Radium 的问题，因为您的代码运行良好，如 here 所示。

React.render(<MenuItem active={false}>some text</MenuItem>, document.getElementById('app'));

【讨论】：