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

汤姆·雅典

我有一个返回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

如何从struct函数获取结果以呈现为Component类render的返回值？

凯尔

您要返回的是react组件，而不是react元素。区别在于元素描述了如何创建组件，而组件是实例化类。您需要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}/>; 
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。