我正在react.js:中尝试一个非常基本的代码
文件index.php有：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<div id="root"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<!-- Load our React component. -->
<script type="text/javascript" src="my.js"></script>
</body>
</html>
Javascript文件my.js具有：
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
'<h1>Hello, {formatName(user)}! </h1>'
);
ReactDOM.render(
element,
document.getElementById('root')
);
但作为输出，我得到了原始JS代码，而不是呈现的JS：
<h1>Hello, {formatName(user)}! </h1>
如何使其运行？
编辑：您可以在这里的codepen中找到正在运行的代码。element变量声明为：
const element = <h1>Hello, {formatName(user)}!</h1>;
但我在元素周围使用了单引号，否则我会在浏览器控制台中看到错误：
未捕获语法错误：意外的标记'<'
第2版：修复了代码笔链接。新的链接就是这个。
const element = '<h1>Hello, ' + formatName(user) + '! </h1>';
您正在向render传递一个字符串。你需要通过JSX。
试试类似的东西
const element = <h1>{formatName(user)}</h1>
为了确保JSX被理解，您还需要包含Babel预处理器。将Babel CDN添加到您的导入-
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha512-kp7YHLxuJDJcOzStgd6vtpxr4ZU9kjn77e6dBsivSz+pUuAuMlE2UTdKB7jjsWT84qbS8kdCWHPETnP/ctrFsA==" crossorigin="anonymous"></script>
Node用户注意事项
在无法调用ReactDOM.render((的Node环境中，您需要确保导入React，就像so-一样
import React from 'react';
看起来您正试图直接渲染JSX，但这需要一个transpiler。
在没有jsx 的情况下进行反应
每个JSX元素只是用于调用的语法糖
React.createElement(component, props, ...children)。所以，任何你可以用JSX完成，也可以用纯JavaScript完成。
代码可能看起来更像
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const Element = ({ user }) => React.createElement(
'h1',
null,
`Hello, ${formatName(user)}!`,
);
ReactDOM.render(
React.createElement(Element, { user }, null),
document.getElementById('root'),
);
或者更简单一点的
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
ReactDOM.render(
React.createElement('h1', null, `Hello, ${formatName(user)}!`),
document.getElementById('root'),
);
// or
ReactDOM.render(
<h1>Hello, {formatName(user)}!</h1>,
document.getElementById('root'),
);