Установка переменной для компонента React не работает

Question

В этом коде используется версия React версии 0.14.

Я пытаюсь установить var для реагирующего компонента и вернуть его. Моя конечная цель - использовать переключатель для назначения разных компонентов на основе некоторых реквизитов. Это часть моего вынести заявление не работает:

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, а другой ответ suggets.