响应克隆组件(无状态或有状态)以传递其他道具

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是无状态的还是状态的，而无需进行toString正则表达式测试。

React.cloneElement/createElement在这些方面失败，给出了以下错误：

React.createElement: type无效--需要一个字符串(用于内置组件)或类/函数(用于组合组件)，但是got: object。您可能忘记从定义在其中的文件中导出组件。

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

Answer 1

而且没有简单的方法可以知道变量组件是无状态的还是状态的.

我认为这就是为什么在某个时候需要extend React.Component，以便更容易区分这两者的原因之一。因为React本身必须能够区分它们，因为没有class不能实例化es。

你可以这样做：

​

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} />;
}

然后就没有必要区分有状态组件和无状态组件了。