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

【问题标题】：React component function returning JSX causes error when used in render method of ES6 class React component在 ES6 类 React 组件的 render 方法中使用返回 JSX 的 React 组件函数会导致错误
【发布时间】：2018-04-24 04:49:19
【问题描述】：

我有一个返回 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 类渲染的返回值？

【问题讨论】：

你有充分的理由把它作为一个单独的函数吗？为什么不把它变成一个LocalsView 组件并渲染它传递locals 作为prop？

标签： javascript reactjs render jsx

【解决方案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}/>; 
  }
}

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：