Question

为什么我会收到关闭Unterminated JSX contents - 元素的错误div？我做错了什么？

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中，您必须像tags一样正确关闭所有已打开的XML元素。

根据DOC：

JSX是ECMAScript的类似XML的语法扩展，没有任何定义语义。它旨在被各种预处理器使用（转发器）将这些令牌转换为标准的ECMAScript。

还有一件事，class是保留关键字，要应用任何css类而不是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>
      );
    }
}

Answer 2

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

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

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

React：未终止的JSX内容

2 个答案: