Question

此代码使用React版本0.14。

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

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中的新功能称为短对象表示法，它允许您省略键。您的代码等同于

return (
    {inputNumber: inputNumber}
);

要么只是返回inputNumber，要么将{...}放在JSX中，正如其他答案所暗示的那样。

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

2 个答案: