为什么不能反应无状态函数 return 数组？

Question

这是我的无状态函数，它尝试 return 一个元素数组：

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>
  ];
}

任何人都可以解释为什么我不能这样做，and/or 提供解决方法吗？

非常感谢！

编辑：这是错误的最小示例：

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

现在您可以 return 数组，试用 React 16 Beta

为什么不能反应无状态函数 return 数组？

Why can't a react stateless function return an array?

reactjs

react-jsx