时间戳

首页 > 解决方案 > 无法使用反应克隆元素

javascript - 无法使用反应克隆元素

问题描述

我正在尝试克隆一个元素，但无论我如何传递它，都会出现以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `BuilderEditor`.

这是我的简化代码：

const HelloComponent = (props) => <div>hello world</div>

const components = {
  hello: HelloComponent
}

const BuilderEditor = () => {

  const Component = components.hello

  // This works
  return <Component/>

  // How do I make this work?
  const Clone = cloneElement(Component, {foo: "bar"})
  return <Clone/>
}

const App = () => {
  return <Div><BuilderEditor/></div>
}

文档似乎表明cloneElement返回一个组件，但它似乎不是。

一个简单console.log的Component正如预期的那样：

HelloComponent(props) {
  return react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement("div", {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 187
    },
    __self: this
  }

检查Cione产量：

$$typeof: Symbol(react.element)
type: undefined
key: undefined
ref: undefined
props: {foo: "bar"}

我该如何使用它？

标签： javascriptreactjs

解决方案

React元素和 React组件之间有很大的不同。

const element = <div />; // a div element; this is what components return
const Component = (props) => <div {...props} />; // a component, a function of Props to Element

React.cloneElement只适用于前者。例如，要向元素添加道具，您可以这样做：

const element2 = React.cloneElement(element, { style: { color: "red" } });

您可能想要做的是向组件添加一个道具。为此，您需要从另一个组件中渲染它，如下所示：

const Component2 = React.memo(
  props => <Component {...props} style={{ color: "red" }} />
);

由于Widget似乎是一个组件，您应该跳过cloneElement并执行与第二个示例类似的操作。

推荐阅读