Question

我目前有：

let renderEmailField = ({input, label, type, meta: {touched, error, pristine}}) =>
  <div>
    <label>{label}</label>
    <Form.Input {...input} type={type} placeholder={'name@example.com'} />
    {touched && error && <span className="form-control-feedback">{error}</span>}
  </div>

如何将上述更新为不需要周围的DIV？，如：

let renderEmailField = ({input, label, type, meta: {touched, error, pristine}}) =>
    <label>{label}</label>
    <Form.Input {...input} type={type} placeholder={'name@example.com'} />
    {touched && error && <span className="form-control-feedback">{error}</span>}

Answer 1

如果您在版本16之前使用任何版本的React，则您也无法使用，因为每个组件必须只返回一个元素。如果您使用/升级到React 16，您可以在问题中执行您所要求的操作，即从组件返回dom元素，字符串或数字的数组。

 render() {
  return [
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

请参阅https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings

Answer 2

你可以只返回一个数组：

let renderEmailField = ({input, label, type, meta: {touched, error, pristine}}) =>
  [
    <label>{label}</label>
    <Form.Input {...input} type={type} placeholder={'name@example.com'} />
    {touched && error && <span className="form-control-feedback">{error}</span>}
  ]

但是您仍然需要从render方法返回单个组件，例如，如果renderEmailField是顶级渲染组件，那么您仍然需要将其包裹起来在<div>：

中

render() {
  return (
    <div>
      {this.renderEmailField()}
    </div>
  )
}

除非您更新到支持rendering arrays of components的React 16。

Answer 3

您的问题归结为Can you return multiple values from a function in Javascript?

答案是否定的。您只能从函数中返回一个值，在您的情况下是一个html元素;因此需要周围的{{1}}。

在React 16中，他们已经添加了对返回数组的支持，如其他答案中所述。

使用React，如何在不需要包装div的情况下声明变量？

3 个答案: