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); 
  }
}

当我运行代码时，我收到错误

元素类型无效：期望字符串（对于内置组件）或a 类/函数（对于复合组件）但得到：对象。检查渲染 Struct

的方法

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

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}/>; 
  }
}

Answer 2

首先，您必须将该功能作为ES模块导入到您的类组件中。

import { struct } from '..path/to/struct';

然后你的渲染函数应该返回一些语法糖的JSX。您应该将中间变量放在render方法的return语句之前。如果您有多个元素，将它包装在div内会更安全。

  render() {
    const locals = this.getLocals();
    return (
      <div>
        struct(locals);
      </div>
    );
  }

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

2 个答案: