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

在没有进行hacky Component正则表达式测试的情况下，没有简单的方法可以知道变量toString是无状态还是有状态。

React.cloneElement/createElement失败，这些错误给我发错：

React.createElement：type无效 - 期望一个字符串（for 内置组件）或类/函数（用于复合组件）但得到了：对象。您可能忘记从中导出组件将其定义为。

那么，有一种简单的方法可以cloneComponent(originalComponent, additionalProps)吗？

Answer 1

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

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

您可以执行以下操作：

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

然后，无需区分有状态和无状态组件。

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

1 个答案: