defaultProps 覆盖 delevert 道具

Question

我有一个简单的 React 组件，我发送了一个 bool 属性来点赞 <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>
      )
    }
  }
}

Answer 1

可能是 Radium 的问题，因为您的代码工作正常，如 here.

所示

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

Answer 2

Menu 父级迭代 this.props.children 而未使用扩展操作 {...this.props} 的问题。所以我在哪里将 props 覆盖为 undefined 然后 defaultProps 开始。

romseguy 的回答让我考虑再次检查所有父组件

defaultProps 覆盖 delevert 道具

defaultProps overrides delevert props

javascript

reactjs

ecmascript-2016