React中返回函数与常量赋值函数的差异及报错排查

报错原因 #

你遇到的Functions are not valid as a React child错误，核心原因是React无法直接渲染函数类型的内容，它期望的是可渲染的JSX元素、字符串、数字或其他合法的React子元素，而非函数本身。

新旧代码的功能差异 #

原有代码逻辑 #

const SomeConst = SomeFunctionThatReturnsAComponent();

这里调用SomeFunctionThatReturnsAComponent()后，返回的是一个React组件函数（即Template内层的(props) => { ... }函数）。当你用<SomeConst prop1="foo"/>渲染时，React会自动调用这个组件函数并传入{prop1: "foo"}作为props，最终生成可渲染的JSX元素，因此运行正常。

修改后的代码逻辑 #

const SomeConst = (props) => {
   //Some logic
   return (SomeFunctionThatReturnsAComponent()());
}

这里的问题出在SomeFunctionThatReturnsAComponent()()的调用逻辑：

1. SomeFunctionThatReturnsAComponent()返回的是接收props的组件函数；
2. 你用()调用该函数时未传入任何props；
3. 更关键的是，Template里的ReturnThisComponent是一个函数，你直接返回了这个函数，而非调用它生成的JSX元素。

当React渲染<SomeConst prop1="foo"/>时，SomeConst函数返回的是另一个函数，这就触发了报错。

修复方案 #

需要确保SomeConst最终返回的是JSX元素而非函数，有两种等价写法：

写法一：以组件标签形式渲染 #

const SomeConst = (props) => {
   // Some logic
   // 获取组件函数
   const TargetComponent = SomeFunctionThatReturnsAComponent();
   // 渲染组件并传入props
   return <TargetComponent {...props} />;
}

写法二：直接调用组件函数并传入props #

const SomeConst = (props) => {
   // Some logic
   // 调用组件函数时传入当前props，得到JSX元素
   return SomeFunctionThatReturnsAComponent()(props);
}

额外注意点 #

你的Template函数存在语法错误：

const ReturnThisComponent = props => <Component component={component}, {props} />

这里的逗号是多余的，展开props需使用{...props}，正确写法为：

const ReturnThisComponent = props => <Component component={component} {...props} />

内容的提问来源于stack exchange，提问作者Ervin Enriquez