javascript - react : Unterminated JSX contents

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 中你必须像在 中一样正确地关闭所有打开的 tags >XML。

根据 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 关键字，请使用 类名.

试试这个:

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>
      );
    }
}