ReactDOM 渲染使用 const 创建的元素答案

【问题标题】：ReactDOM Render of elements created with constReactDOM 渲染使用 const 创建的元素
【发布时间】：2019-09-17 00:02:36
【问题描述】：

我是 React 新手。我一直在关注一些教程，documentation.我正在尝试进行以下工作：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Composable Squares</title>
</head>
<body>
<div id="container"></div>

<script src="script.js"></script>    
</body>
</html>

script.js

const Title = (props) => {
        const { text } = props;
        return React.createElement('h1', null, text);
    }
const App = (props) => {
    return React.createElement('div', null,
        React.createElement(Title, { text: 'Title one!' } ),
        React.createElement(Title, { text: 'Title two!!' } ),
        React.createElement(Title, { text: 'Title three!!!' } )
    )
}

ReactDOM.render(App, document.getElementById('container'));

我收到以下消息：

警告：函数作为 React 子级无效。如果发生这种情况你返回一个组件而不是从渲染。或许你的意思是调用这个函数而不是返回它。

我尝试将其更改为：ReactDOM.render(<App />, document.getElementById('container'))，我得到了Unexpected token <

如何渲染 App 创建的元素？

【问题讨论】：

我强烈推荐使用 JSX 而不是 React.createElement 语法。 JSX 更简洁，更易于阅读，而且通常使用起来更轻松。

标签： reactjs

【解决方案1】：

您的App 是一个函数。 ReactDOM.render() expects an element as argument, not a function.

最快的解决方案是调用App():

ReactDOM.render(App(), document.getElementById('container'));

或者您可以使App 不是一个函数，而是将React.createElement('div'... 的结果分配给它。

演示：

const Title = (props) => {
        const { text } = props;
        return React.createElement('h1', null, text);
    }
const App = (props) => {
    return React.createElement('div', null,
        React.createElement(Title, { text: 'Title one!' } ),
        React.createElement(Title, { text: 'Title two!!' } ),
        React.createElement(Title, { text: 'Title three!!!' } )
    )
}

ReactDOM.render(App(), document.getElementById('container'));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="//unpkg.com/react/umd/react.development.js"></script>
    <script type="text/javascript" src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Composable Squares</title>
</head>
<body>
<div id="container"></div>

<!-- script src="script.js"></script -->
</body>
</html>

【讨论】：

【解决方案2】：

当你使用它时，

ReactDOM.render(<App />, document.getElementById('container'))

您遇到了错误，因为您使用的是JSX，所以您需要babel。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

还要确保在添加babel 时，必须在脚本标签上添加type="text/babel"，

<script type="text/babel" src="script.js"></script>

Demo

阅读如何Add React to a Website。

【讨论】：

谢谢。我不确定我正在查看的一些教程的不同语法是什么。我想知道 JSX。
@Silversail，使用 JSX 非常简单，节省大量时间和空间。考虑尝试一下。
我尝试将 babel 添加到我的脚本标签，但我得到：“CORS 策略已阻止从源 'null' 访问 'file:///Users/...' 处的 XMLHttpRequest : 跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。“我可以将 babel 用于外部 js 文件还是必须在 index.html 中编写所有内容？
CORS 策略错误来自后端，而不是来自前端。您可以在外部 js 文件中使用 JSX，为此您需要在脚本标签上提供type="text/babel"，如答案所示。