React：未终止的 JSX 内容

Question

为什么我会收到结束 div 元素的错误 Unterminated JSX contents？我做错了什么？

export default class Search extends Component {
  render() {
    return (
      <div class="ui icon input">
        <input type="text" placeholder="Search...">
        <i class="circular search link icon"></i>
      </div>
    );
  }
}

Answer 1

您的 input JSX 元素未终止，它缺少结束标记。

而class是Javascript中的保留名称。您需要改用 className 道具。

<div className="ui icon input">
    <input type="text" placeholder="Search..." />
    <i className="circular search link icon"></i>
</div>

Answer 2

问题是，您忘记关闭 input 元素，在 JSX 中，您必须像在 XML 中一样正确关闭所有打开的 tags。

根据DOC：

JSX is a XML-like syntax extension to ECMAScript without any defined semantics. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

还有一点，class 是保留关键字，要应用任何 css class 而不是使用 class 关键字，请使用 className。

试试这个：

export default class Search extends Component {
   render() {
      return (
         <div className="ui icon input">
            <input type="text" placeholder="Search..."/>
            <i className="circular search link icon"></i>
         </div>
      );
    }
}

React：未终止的 JSX 内容

React: Unterminated JSX contents

javascript

reactjs