反應克隆組件（無狀態或有狀態）以傳遞其他道具

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

這樣就無需區分有狀態組件和無狀態組件。