Question

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

在组件内部，我想将props附加到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抛出不变违规：

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

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

Answer 1

element道具类型需要一个元素，就像<MyTemplate />一样 - 即使用道具。但是你接受了一个元素构造函数（MyTemplate）。

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

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

在道具上附加无状态函数的道具

1 个答案: