在反应中添加单选按钮时面临的问题 \- 输入是一个空元素标签，既不能有\`children\`也不能使用\`dangerouslySetInnerHTML\`

Question

输入是一个空元素标签，既不能有 children 也不能使用 dangerouslySetInnerHTML 。

   render() {
    let radioid = this.props.radioid;
    return (
      <div className="row">
        {this.props.options.map(function(option) {
          return (
            <div key={radioid} className="column">
              <input type="radio" name={radioid} value={option}>
                <label>{option}</label>
              </input>
            </div>
          );
         })}
      </div>
    );
  }

例如 options 是 A、B、C、D 等元素的列表

原文由 Abdul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据错误，输入标签不应该有任何子标签，将标签从输入闭包标签中取出

render() {
    let radioid = this.props.radioid;
    return (
        <div className="row">
        {this.props.options.map(function(option) {
            return (
            <div key={radioid} className="column">
                <label>{option}</label>
                <input type="radio" name={radioid} value={option}/>
            </div>
            );
        })}
        </div>
    );
}

原文由 Anshul Bansal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您在 jsx 中的输入标记中收到错误 coz 应该自动关闭，因此返回后始终 jsx 脚本应该写入。

 render() {
    let radioid = this.props.radioid;
    return (
        <div className="row">
        {this.props.options.map(function(option) {
            return (
            <div key={radioid} className="column">
                <label>{option}</label>
                <input type="radio" name={radioid} value={option}/>
            </div>
            );
        })}
        </div>
    );
}

原文由 Muhammed Yahya 发布，翻译遵循 CC BY-SA 4.0 许可协议