Почему не может реагировать на функцию без сохранения состояния массива?

Question

Вот моя апатридом функция, которая пытается вернуть массив элементов:

function DeliveryPreference (props) { 
    return [ 
     <h4> 
     Delivery Preference 
     </h4>, 
     <div className='yesNoCheckbox'> 
      <input type="radio" value={'tube'} onChange={props.onChange} id='tube' checked={props.value === 'tube'}/> <label htmlFor='tube'>Tube</label> <br/> 
      <input type="radio" value={'plate'} onChange={props.onChange} id='plate' checked={props.value === 'plate'}/> <label htmlFor='plate'>Plate</label><br/> 
     </div> 
    ]; 
} 

Может кто-нибудь объяснить, почему я не могу сделать это, и/или обеспечить работу вокруг?

Большое спасибо!

Edit: Вот минимальный пример ошибки:

function App (props) { 
    return [ 
    <div>1</div>, 
    <div>2</div>, 
    ] 
} 


ReactDOM.render( 
    <App/> 
    , document.getElementById('root') 
); 

Answer 1

Я думаю, что ваш вопрос полагаться на невозможность для лиц без функции для обработки ничего, кроме одного элемента JSX. Он просто не знает, как правильно отобразить ваш массив.

Я бы посоветовал вам обернуть элементы массива в корне <div> так, чтобы заставить его работать:

function DeliveryPreference (props) { 
    return (
    <div> 
     <h4>Delivery Preference</h4> 
     <div className='yesNoCheckbox'> 
     <input type="radio" value={'tube'} onChange={props.onChange} id='tube' checked={props.value === 'tube'}/> <label htmlFor='tube'>Tube</label> <br/> 
     <input type="radio" value={'plate'} onChange={props.onChange} id='plate' checked={props.value === 'plate'}/> <label htmlFor='plate'>Plate</label><br/> 
     </div> 
    </div> 
) 
} 

Или разложить ваши два элемента JSX в различных функциях.

Answer 2

Теперь вы можете вернуть массив, опробовать React 16 Beta