反应克隆组件（无状态或有状态）以传递其他道具

Question

我想克隆/扩展一个React组件（不知道它是有状态的还是无状态的）并传递它的道具：

const Foo = (props) => {
    return (
    <div>foo</div>
  );
}

class Bar extends React.Component {
    render() {
    return (
        <div>bar</div>
    )
  }
}

问题是，应该对Foo和Bar这两个变量进行不同的处理：

const FooExtended = (props, context) => {
    return Foo(_.extend(props, additionalProps), context);
}

class BarExtended extends Bar {
    constructor(props, context) {
        super(_.extend(props, additionalProps), context);
    }
}

没有简单的方法来知道变量Component是Stateless还是Statefull，而无需进行骇人的toString regex测试。

React.cloneElement/createElement在这些失败，给我以下错误：

React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。 您可能忘记了从定义文件中导出组件。

那么，有什么简单的方法可以只做cloneComponent(originalComponent, additionalProps)吗？

Answer 1

没有简单的方法来知道变量Component是无状态还是有状态[...]

而且我认为这是为什么需要extend React.Component的原因之一，以便更容易地区分两者。 因为React本身必须能够区分它们，因为如果没有new则无法实例化es class 。

您可以执行以下操作：

 function cloneComponent(originalComponent, additionalProps) { if (originalComponent.prototype instanceof React.Component) { return class extends originalComponent { constructor(props, context) { super(_.extend(props, additionalProps), context); } }; } return (props, context) => { return originalComponent(_.extend(props, additionalProps), context); }; } 

因为Foo.protoype instanceof React.Component是true 。

---

但是 ，我认为更常见的做法是执行以下操作：

function addProps(Component, additionalProps) {
  return props => <Component {...props} {...additionalProps} />;
}

这样就无需区分有状态组件和无状态组件。