Question

我仍然在征服React的路上。我更喜欢在创建React类时使用基于es6组件的方法。当我需要继承一些已定义的defaultProps静态属性的现有类时，我被拘留。

import {Component} from 'react';

class MyBox extends Component {

}

// Define defaultProps for MyBox
MyBox.defaultProps = {
    onEmptyMessage: 'Nothing at here'
}

当我定义扩展MyBox的类的静态属性defaultProps时，它会完全覆盖父类的defaultProps。

class MyItems extends MyBox {
    render() {
         // this.props.onEmptyMessage is undefined here
         // but this.props.onRemoveMessage is present
         return <i>{this.props.onEmptyMessage}</i>; //<i></i>
    }
}
// Define defaultProps for MyItems
MyItems.defaultProps = {
    onRemoveMessage: 'Are you sure?'
}

但我需要扩展父类的defaultProps，而不是覆盖。我理解通过直接扩展父类的defaultProps属性是可能的。

MyItems.defaultProps = _.extend(MyBox.defaultProps, {
    onRemoveMessage: 'Are you sure?'
});

但我觉得这样的伎俩很脏。有没有办法根据React计划执行它？

Answer 1

在我看来，问题不在于如何合并属性，而是如何在不扩展的情况下编写属性。你会得到这样的组件：

class MyBox extends Component {

  static defaultProps = { title: 'Box title' }

  render() {
    return (
        <div className={'mybox ' + this.props.className}>
          <h1>{this.props.title}</h1>
          {this.prop.children}
        </div>
    )
  }

}

class MyItems extends Component {

  render() {
    return (
        <MyBox className="itembox" title="Items title">
          <i>{this.props.children}</i>
        </MyBox>
    )
  }

}

然后像那样使用它

<MyBox>
  box
</MyBox>

或

<MyItems>
  items box
</MyItems>

这将呈现：

<div class="mybox">
    <h1>Box title</h1>
    box
</div>

或

<div class="mybox itembox">
    <h1>Items title</h1>
    <i>items box</i>
</div>

看起来你已经扩展/覆盖了className或title，但是你已经编写了。如果您使用这种方式构建UI，您会发现它会更容易，更快

React扩展了defautProps

1 个答案: