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

Question

此代码使用 React 版本 0.14。

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

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

此替换代码评估良好：

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

这是我收到的错误消息（InputDataItem 是上述代码段来自的组件）：

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

Answer 1

应该是：

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

或者简单地说：

return inputNumber;

Answer 2

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

return (
    {inputNumber}
);

没有 JSX。 {...} 表示一个 对象文字 ，尽管它对您来说可能不像一个。 ES2015 中的新功能是 short object notation，它允许您省略密钥。您的代码相当于

return (
    {inputNumber: inputNumber}
);

要么只是 return inputNumber 要么将 {...} 放在 JSX 中，正如其他答案所建议的那样。

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

Setting variable to React component not working

javascript

reactjs

react-jsx