Question

我真的需要在下面的React代码中知道JSX是什么以及它的实际作用。

这是我在src/index.js文件中编码的反应代码。

const greetDate = () => {
    const getDate = new Date();
    return getDate.toDateString();
}

const greeting = <h1> Hello World. Now current time is {greetDate()}.</h1>
ReactDOM.render(greeting, document.getElementById('root'));
registerServiceWorker();

Answer 1

什么是JSX？答案是 here

摘自官方文档：

... JSX可能会让您想起模板语言，但是它具有JavaScript的全部功能。 ... JSX产生React“元素”。

这段代码不是jsx：

const greetDate = () => {
    const getDate = new Date();
    return getDate.toDateString();
}

以前的代码只是javascript ES6 语法。

这是jsx：

const greeting = <h1> Hello World. Now current time is {greetDate()}.</h1>
ReactDOM.render(greeting, document.getElementById('root'));

并将被编译为：

var greeting = React.createElement(
    'h1',
    null,
    ' Hello World. Now current time is ',
    greetDate(),
    '.'
);
ReactDOM.render(greeting, document.getElementById('root'));

转到 BabelJS ，然后将代码粘贴到左侧面板中，您将在右侧看到结果：https://babeljs.io/en/repl

什么是JSX？在React中它到底在做什么？

1 个答案: