在 ES6 类 React 组件的 render 方法中使用返回 JSX 的 React 组件函数会导致错误

Question

我有一个返回 JSX 的函数，如下所示：

  function struct(locals) { 
    return (
      <View style={fieldsetStyle}>
        {label}
        {error}
        {rows}
      </View>
    );
}
label, error, and rows are functions that also return JSX.

我在 ES6 类组件的 render 方法中调用此函数

class Component extends React.Component {
  render() {
    const locals = this.getLocals();

    return struct(locals); 
  }
}

当我运行代码时，出现错误

元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。检查渲染方法Struct

如何从结构体函数中获取结果来渲染为 Component 类 render 的返回值？

Answer 1

您正在返回一个反应组件，而不是一个反应元素。不同之处在于元素描述了如何创建组件，其中组件是实例化类。你需要return React.createElement(Struct);，或者return <Struct/>。另外，你的locals变量实际上是一个props对象。所以你的代码应该是这样的：

function struct({locals}) { 
    return (
      <View style={fieldsetStyle}>
        {label}
        {error}
        {rows}
      </View>
    );
}

class Component extends React.Component {
  render() {
    const locals = this.getLocals();

    return <Struct locals={locals}/>; 
  }
}