将变量设置为 React 组件不起作用答案

【问题标题】：Setting variable to React component not working将变量设置为 React 组件不起作用
【发布时间】：2016-03-08 19:49:03
【问题描述】：

此代码使用 React 0.14 版。

我正在尝试将 var 设置为 react 组件并将其返回。我的最终目标是使用开关根据一些道具分配不同的组件。这是我的渲染语句不起作用的部分：

var inputNumber = <InputNumber displayText={this.props.data.DisplayText} />;
return (
    {inputNumber}
);

此替换代码评估良好：

return (
    <InputNumber displayText={this.props.data.DisplayText}/>
);

这是我得到的错误信息（InputDataItem 是上面 sn-p 来自的组件）：

Uncaught Error: Invariant Violation: InputDataItem.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

显然我的语法理解有差距。

我的假设基于 React 文档的这一部分（第 4 个代码示例）：https://facebook.github.io/react/tips/if-else-in-JSX.html

【问题讨论】：

标签： javascript reactjs react-jsx

【解决方案1】：

应该是：

return (
  <div>
    {inputNumber}
  </div>
);

或者简单地说：

return inputNumber;

【讨论】：

我知道这很简单。非常感谢。

【解决方案2】：

{...} 仅在 JSX 内部是特殊的。在

return (
    {inputNumber}
);

没有 JSX。 {...} 表示一个对象字面量，即使它在您看来可能不像一个。 ES2015 中的新功能是一种称为 short object notation 的东西，它允许您省略键。你的代码相当于

return (
    {inputNumber: inputNumber}
);

要么直接返回 inputNumber 要么将 {...} 放入 JSX 中，作为其他答案的建议。

【讨论】：