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

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

非常感谢！

编辑：以下是错误的最小示例：

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

为什么无状态函数无法返回数组？

2 个答案: