Question

在我的组件的渲染功能中，我使用标记调用其他函数。到现在为止还挺好。

renderEquipmentOptions() {
  return (
    <div className="form-check">
      <label className="form-check-label">
        <input className="form-check-input" type="checkbox" value=""/>
        Nothing
      </label>
    </div>
  )
}

但是现在我想为此函数添加一个贴图以生成其他标记。

renderEquipmentOptions() {
  const render = this.props.equipment.map((item, i) => {
    return (
      <div key={i} className="form-check form-check-inline">
        <label className="form-check-label">
          <input className="form-check-input" type="checkbox" value=""/>
          {item}
        </label>
      </div>
    )
  });

  return (
    <div className="form-check">
      <label className="form-check-label">
        <input className="form-check-input" type="checkbox" value=""/>
        Nothing
      </label>
    </div>
    {this.render()}
  )
}

这不起作用。看来你不能在{}中包装一个函数并调用它。这是因为它是一个函数内的函数吗？

Answer 1

它不起作用，因为您试图从函数返回多个元素而不将它们作为数组返回。此外，render不是您的案例中的函数，而是variable

更改代码以返回类似

的数组

renderEquipmentOptions() {
  const render = this.props.equipment.map((item, i) => {
    return (
      <div key={i} className="form-check form-check-inline">
        <label className="form-check-label">
          <input className="form-check-input" type="checkbox" value=""/>
          {item}
        </label>
      </div>
    )
  });

  return (
    [<div className="form-check">
      <label className="form-check-label">
        <input className="form-check-input" type="checkbox" value=""/>
        Nothing
      </label>
    </div>,
    ...render
    ]
  )
}

在JSX中的函数内反映渲染函数？

1 个答案: