反应渲染预期表达

Question

我现在开始使用 React。 我遵循 reactjs.org 关于如何创建运行 React 的网页的官方指南。 然后我只是尝试将我渲染的输入修改为一个简单的<h1> 。 但是，一旦我这样做，我就收到了意外的表达式错误，说“<”不起作用。

这是代码。

const element = <h1>test</h1>;

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(element, domContainer);

我知道这是非常基本的。 我在他们的网站上看到的任何地方都有效，但我总是遇到错误。

我用它来导入 React：

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

这就是我想做的：

谢谢你的帮助 ：）

Answer 1

这是因为 react 期望组件渲染，它可以是一个函数或一个类。

所以你必须把你的元素包装成一个函数或一个类，并用 TitleCase 命名它。

const Element = () => <div>element</div>

ReactDOM.render(<Element />, domContainer);

我认为你应该阅读更多关于他们的文档Reactjs 文档

Answer 2

我想您“导入” React的事实意味着您不使用webpack或任何其他构建工具。 所以你不转译你的代码。 但

const element = <h1>test</h1>;

是不正确的JS。 这是JSX 。

尝试将此行更改为

const element = React.createElement('h1', null, 'test');

见https://reactjs.org/docs/react-without-jsx.html

或者使用一些构建工具链。

Answer 3

您尚未在设置中配置 JSX 转译。 检查此链接以在没有 JSX 的情况下使用 React： https ://reactjs.org/docs/react-without-jsx.html。

如果您想在没有设置的情况下使用 JSX，请将此脚本添加到您的 html： <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>并标记脚本带有type="text/babel"标签： https : //reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx

尽管您可以在脚本标签中添加反应，但它并不是真正推荐的方式，因为您需要在实际项目中设置将 jsx 编译为 js。

我建议您使用 create-react-app 来设置基本项目。

https://github.com/facebook/create-react-app