Question

我刚学习React，我正在使用ES7语法编写组件。我的想法是创建一个基本组件，它将包含一些我希望所有派生组件都具有的方法。例如，我想实现valueLink without the mixin，以便在我的所有组件中进行双向绑定。这是我的想法：

class MyComponent extends React.Component {

    bindTwoWay(name) {
        return {
            value: this.state[name],
            requestChange: (value) => {
                this.setState({[name]: value})
            }
        }
    };
}

class TextBox extends MyComponent {
    state = {
        val: ''
    };

    render() {
        return (<div>
            <input valueLink={this.bindTwoWay('val')}/>
            <div>You typed: {this.state.val}</div>
        </div>)
    }
}

它运作得很好。但是，我无法找到有关此方法的更多信息。这不是关于valueLink，这只是一个例子。我们的想法是在基础组件中包含一些方法，然后扩展该组件，以便派生组件具有所有这些方法，就像通常的OOP方式一样。所以我想知道这是完全没问题，还是有一些我不知道的缺陷。感谢。

Answer 1

这完全没问题，只是基本的继承。使用继承来替换mixins的警告是没有多重继承，所以你不能像给它多个mixin那样给你的TextBox功能提供多个基类。要解决此问题，您可以使用component composition。在您的情况下，组合不会像您在示例中定义的那样直接工作，但是有一种解决方法。

首先，您需要定义一个合成组件

export default (ComposedComponent) => {
  class MyComponent extends React.Component {
    constructor(props, state) {
      super(props, state);
      this.state = {
        val: ''
      };
    }
    bindTwoWay(name) {
      return {
        value: this.state[name],
        requestChange: (value) => {
            this.setState({[name]: value})
        }
      };
    }

    render() {
      return (
        <ComposedComponent 
          {...this.props}
          {...this.state} 
          bindTwoWay={this.bindTwoWay.bind(this)}
        />
      }
    }
  }

  return MyComponent
}

然后在需要一些常用功能的地方定义组件

import compose from 'path-to-composer';

class TextBox extends React.Component {
  render() {
    return (
      <div>
        <input valueLink={this.props.bindTwoWay('val')}/>
        <div>You typed: {this.props.val}</div>
      </div>
    )
  }
}

export default compose(TextBox)

我没有对此进行过测试，但它应该有效。

Answer 2

我不建议创建自己的基础组件并从中驱动，而应使用React文档中建议的合成。 https://reactjs.org/docs/react-component.html#overview

创建基本组件然后在React中扩展它们是一个好习惯吗？

2 个答案: