从 props 将 props 附加到无状态函数上

Question

我正在构建一个 React 组件，它通过 prop component={MyTemplate} 接收一个组件（PropTypes.func 或 PropTypes.element），它将用作模板，类似于 react-router 进行路由定义的方式。

在组件内部，我想将道具附加到 component 元素。根据文档，我知道我应该使用cloneElement 来附加道具。

class MyComponent extends Component {
  // ...

  render () {
    const {component, blockProps} = this.props;
    const body = cloneElement(component, blockProps);

    return (
      <div className="sortable-block__body">
        {body}
      </div>
    );
  }
}

// later when rendering the component
<MyComponent component={component} ... />

在渲染组件时 React 抛出 Invariant Violation：

未捕获的不变违规：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。

cloneElement 不将无状态函数视为ReactElement 吗？ 如果没有，那么如何管理向无状态组件添加道具？

Answer 1

element prop 类型需要一个元素，类似于 <MyTemplate /> — 即带有 props。但是您接受的是元素构造函数 (MyTemplate)。

另外，要从构造函数创建实例，您不需要cloneElement，而是使用 JSX 语法（并将变量大写）：

const Component = this.props.component;
const body = <Component {...blockProps} />