javascript - 使用 ReactDOM 输入后添加跨度

Question

我正在尝试使用 ReactDOM for React 15 创建内联 radio /文本/输入表单，但是在打开浏览器时出现错误:

Uncaught Invariant Violation: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

我尝试使用的引发此错误的代码如下:

const D = ReactDOM; //react-dom-factories

D.input({
    type: 'radio',
    className: 'stra-on-loss-return-to-base-radio',
    value: 'return_to_base',
    disabled: this.state.active
},  D.span(null, 'Return to base bet'), D.br()),
D.input({
    type: 'radio',
    className: 'stra-on-loss-increase-bet-by',
    value: 'increase_bet_by',
    disabled: this.state.active
},  D.span(null, 'Increase bet by: '), D.input({
    type: 'text',
    ref: 'onLossQty',
    onChange: this.updateOnLossQty,
    value: this.state.onLossIncreaseQty,
    disabled: this.state.active || this.state.onLossSelectedOpt !== 'increase_bet_by' }
), D.span(null, 'x'))

---

https://www.npmjs.com/package/react-dom-factories问题是 ReactDOM https://pastebin.com/51x23vZy是整个文件的副本。

Answer 1

该错误表示您不能将 child 放入 input 中元素。你正在路过D.span和D.br参数作为子项，换句话说，您正在尝试渲染它(示例的前半部分):

<input type="radio">
  <span>
    Return to base bet
  </span>
  <br />
</input>

HTML 不允许 <input>无论如何都要生 child ，所以 React 告诉你这是一个错误。所以你需要输入 input , span ，和br里面 div :

D.div(
  null,
  D.input({
    type: 'radio',
    ...
  }),
  D.span(null, 'Return to base bet'),
  D.br()
)

相应的 HTML 如下所示

<div>
  <input type="radio" />
  <span>
    Return to base bet
  </span>
  <br />
</div>

或者如果你不想要 parent div或span你可以将它们包裹在 React.Fragment 中.