Reactjs警告：输入是空元素标记，不能具有`children`或使用`props.dangerouslySetInnerHTML`。请检查空的渲染方法。

Question

有人能告诉我为什么控制台会显示这个警告信息吗？

React.createElement(
  'div',
   { className: 'form-group has-feedback' },
   React.createElement('label', { htmlFor:"lastname", className:"font-14"}, "Last Name"),
   React.createElement(
     "input", 
     { 
     id:"lastname", type: 'text', 
     className: 'form-control', placeholder: 'Last Name', 
     onChange: this.handleChange.bind(this, 'lname') 
     }
   )
)

- treb

---

我的输入没有任何子元素。 - treb

Answer 1

我遇到了同样的错误，下面的标签对我有用；

将输入标签改为自闭合。

改为：

<input> </input>

使用自闭合标签。

<input /> 

- Dholu

---

很高兴它对jefelewis有用，这是我建议的生活中唯一有效的事情，哈哈。 - Dholu

我还想补充一点，如果您正在创建复选框/单选框表单，应该使用<input ... /> Option #1而不是<input ...>Option #1</input>。 - sebtheiler

Answer 2

我在下面的代码中删除了 otherProps 并解决了这个问题。但我不知道导致问题的确切原因。

return _react2.default.createElement('img', _extends({ title: '\u4FEE\u6539' }, otherProps, { src: './imgs/icon/updateicon.png', onClick: this.props.onClick, style: { cursor: "pointer" } }))

- Jack Hu

Answer 3

为了避免这个问题，您可以始终将元素放在render()中。像这样：

ReactDOM.render(<div className= 'form-group has-feedback'>
        <label htmlFor = "lastname" className = "font-14"></label>
        <input id = "lastname" type =  'text', 
        className = 'form-control' placeholder = 'Last Name'
        onChange = 'function()' />
        </div>, 
document.getElementById("options"));

注意：请确保在您的index.HTML文件中创建一个id为“options”的元素。

- Vishnu KP