继承 React 组件的正确方法

IT技术 javascript inheritance reactjs prototype prototype-programming
2021-05-21 16:22:30

我知道我的问题有点偏颇,但我对 Javascript 和prototypes. 所以一个例子会非常有帮助。所以我有一个React组件,它基本上是这样的:

var Component1 = React.createClass({

getInitialState: function () {
        return ({
            searchable: true,
        })
    },

function1: function () {
        return ({
            somevalue
        })
    },

render: function () {

        var redText = {
            color: 'red'
        };

        var redBorder = {
            color: 'red',
            border: '1px solid red'

        };

        return (
                <form>
                    <div>
                        <a onClick={this.props.handleAddClick}>Something</a>
                    </div>

                    <div>
                        <label>Some label</label>
                        <input type="text"/>
                    </div>
               </form> ) 
});

我也有Component2which 基本上完全相同,但<input/>returnrender功能内部增加了一个

我也有Component3,它共享相同的功能,但具有不同的render()功能。

那么如何在这里应用继承并避免复制粘贴3次呢?我只是想念一些实用的插图,所以我很感激。

Edit1__________________________________________________所以我尝试按照第一个答案实现Prototype继承,但React似乎没有看到这些函数:getInitialState()为空,渲染后初始状态为空。这种方法有什么问题?

我也试着按照教科书去做,做了:

function MyPrototype() {};
MyPrototype.prototype.getInitialState = function () {
    return ({
        someProperty: true;
    })
};

function Component1() {};
Component1.prototype = Object.create(MyPrototype.prototype);
Component1.prototype.render = function () {
    console.log(this);
    return (<div></div>)};

var MyComponent1 = React.createClass(new Component1());

但是当我打开浏览器时,出现错误:Uncaught Invariant Violation: createClass(...): Class specification must implement arendermethod.

我这样做错了什么?

编辑2_________________________________________________________

实际上,我看到 React 既不支持 mixins 也不支持原型。应该使用组合来代替。这篇文章对此进行了解释: Dan Abramov 的文章 Mixins Are Dead。万岁组合

1个回答

在 React 中,严重不鼓励组件的继承
React 更适合通过组合来表达相同的关系。

下面是一个使用组合的例子:

class Button extends Component {
  render() {
    return (
      <div className='Button' style={{ color: this.props.color }}>
        {this.props.children}
      </div>
    )
  }
}

class DeleteButton extends Component {
  render() {
    return (
      <Button color='red'>Delete</Button>
    )
  }
}

请注意如何DeleteButton使用外观和感觉Button 而不继承 它。相反,Button通过 定义其可配置部分props,并DeleteButton提供这些props。在实际的 DOM 中,<Button /><DeleteButton />都会渲染到单个 DOM 节点——递归解析发生在那个render()时候,这就是 React 的核心思想。

事实上,如果你不需要生命周期钩子或本地状态,你甚至可以将组件定义为函数:

function Button({ color, children }) {
  return (
    <div className='Button' style={{ color }}>
      {children}
    </div>
  )
}

function DeleteButton() {
  return (
    <Button color='red'>Delete</Button>
  )
}

您甚至可以将类与函数混合使用。这在继承中是不可能的,但在组合中效果很好。

至于您的具体用例:

我也有Component2它基本上完全相同,但<input/>在其渲染函数的返回中增加一个

您可以方法的返回值中Component1接受this.props.children并使用它们render(),并Component2渲染到<Component1><input /></Component>. 这与我上面展示的非常相似。你也不必使用childrenprop——你可以在任何 prop 中传递一个 React 元素,例如<Component1 footer={<input />} />,然后你可以使用this.props.footerinside Component1

我也有Component3,它共享相同的功能,但具有不同的 render() 功能。

如果它们共享任何其他代码(例如,计算某些数据的实用程序),请将这些代码从组件外部移到共享module中,然后从两个组件中导入它。

如果他们共享任何 UI,请将其提取到另一个组件中,并从您的两个组件中使用它。