Reactjs 使用常量创建的元素的ReactDOM呈现_Reactjs

Reactjs 使用常量创建的元素的ReactDOM呈现

reactjs

Reactjs 使用常量创建的元素的ReactDOM呈现,reactjs,Reactjs,我是新来的。我一直在学习一些教程，我正在努力完成以下工作： 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-Compati

我是新来的。我一直在学习一些教程，我正在努力完成以下工作：

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>

我得到了以下信息：

警告：函数作为子函数无效。如果返回一个组件，而不是从“渲染”返回。或许您的意思是调用此函数而不是返回它

我已尝试将其更改为：

ReactDOM.render（，document.getElementById（'container'））

并且我得到了

意外标记您的应用程序是一个函数
最快的解决方案是只调用App（）
：
或者您可以使App
不是一个函数，而是将React.createElement（'div'）…
的结果分配给它
演示：

const Title=（道具）=>{
const{text}=props；
返回React.createElement（'h1'，null，text）；
}
常量应用=（道具）=>{
返回React.createElement（'div'，null，
React.createElement（标题，{text:'Title one！'}），
React.createElement（标题，{text:'Title two！！'}），
React.createElement（标题，{text:'Title three！！！'}）
)
}
ReactDOM.render（App（），document.getElementById（'container'）；

可组合方格
使用此选项时
ReactDOM.render(<App />, document.getElementById('container'))

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

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




阅读操作指南。
我强烈建议使用JSX而不是React.createElement
语法。JSX更简洁、更容易阅读，而且通常不太麻烦。谢谢。我不确定我正在看的一些教程中的语法有什么不同。我想知道JSX。@Silversail，使用JSX就是v我试着把它添加到我的脚本标签中，但是我得到了：“访问XMLHttpRequest”。file:///Users/...CORS策略已阻止“来自源”的“null”：跨源请求仅支持协议方案：http、数据、chrome、chrome扩展、https。”我可以将babel用于外部js文件，还是必须在index.html中写入所有内容？CORS策略错误来自后端，而不是前端。您可以在外部js文件中使用JSX，因此需要在脚本标记上提供type=“text/babel”，如回答中所示。
ReactDOM.render(<App />, document.getElementById('container'))

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

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