Fatal编程技术网
  • php/
  • Php react.js代码中的简单HTML元素在Xampp localhost中不起作用

Php react.js代码中的简单HTML元素在Xampp localhost中不起作用

php reactjs

Php react.js代码中的简单HTML元素在Xampp localhost中不起作用,php,reactjs,Php,Reactjs,我正在尝试一个非常基本的代码： File index.php具有： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <div id="root">

我正在尝试一个非常基本的代码：

File 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>
但作为输出，我得到的是原始JS代码，而不是呈现的JS：

<h1>Hello, {formatName(user)}! </h1>
但我在元素周围使用了单引号，否则我会在浏览器控制台中看到错误：
未捕获的语法错误：意外的标记'
const元素='Hello'，+formatName（user）+'！'；
您正在将字符串传递给
渲染
。你需要通过JSX

试试像这样的东西-

const element = <h1>{formatName(user)}</h1>
看起来您正试图直接呈现JSX，但这需要一个transpiler

每个JSX元素只是用于调用的语法糖 
React.createElement（组件、道具、子项）
。那么，你有什么事吗 可以使用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'),
);

函数formatName（用户）{
返回user.firstName+“”+user.lastName；
}
常量用户={
名字：“哈珀”，
姓：“佩雷斯”
};
ReactDOM.render(
React.createElement（'h1'，null，'Hello，${formatName（user）}！`），
document.getElementById（'root'），
);
//或
ReactDOM.render(
您好，{formatName（user）}！，
document.getElementById（'root'），
);
相同的输出。这并不能解决问题。我在OP中添加了
EDIT
。codepen链接中没有代码。请参见OPSecond中的EDIT2 codepen似乎可以工作
const-element=Hello，{formatName（user）}在我看来也是正确的。问题是什么？是针对JSX使用导入的react，
import react from'react'？不使用
导入
。我给出了完整的代码。现在我在浏览器控制台中看到了错误：
uncaughtsyntaxerror:Unexpected-token'您是否正在尝试直接呈现JSX？与中一样，您使用react和reactDom脚本，并使用全局定义的react和reactDom？我想你需要。我用的是PHP，不是Node。现在我在浏览器控制台中遇到了这个错误：“uncaughtsyntaxerror:Unexpected token”，这可能意味着您的JSX没有被正确解释。请尝试将
my.js
的内容添加到脚本标记本身。即使现在也不起作用。相同错误：未捕获的SyntaxError:意外标记“哪一个更好-使用或不使用JSX进行反应？”？如何直接呈现JSX？@IstiaqueAhmed这是一个固执己见的问题。显然，大多数人更喜欢JSX语法，因为它易于使用，但它需要一个传输（类似于编译）构建步骤来将react JSX代码转换为可以在浏览器中运行的普通javascript。但是，如果从vanilla JS开始，您可以跳过传输步骤。在您的情况下，似乎有必要使用vanilla JS。1） react.js的整个教程是关于什么的？有没有JSX？2） 我也需要一个transpiler来运行代码吗？3） 在我给出的教程链接中，关于transpiler的内容写在哪里？@IstiaqueAhmed With JSX，这是编写react应用程序的事实上的标准方式。这就是为什么“React without JSX”位于高级指南中。是`React.createElement（`for React without JSX？

const element = <h1>{formatName(user)}</h1>



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'),
);