ReactJS中的渲染如何与"返回"的HTML标记一起工作

Question

在React代码中,我return (<form> .. </form>);在HTML里面看到......这是有效的Javascript吗？它以某种方式转换为字符串或什么？

我正在学习Javascript,当然也有一些差距.这让我感到很困惑!

var AddTodoComponent = React.createClass({
  render: function () {
    return (
      <form>
        <input type="text" disabled={AppStore.isSaving()}/>
      </form>
    );
  }
});

Answer 1

此语法称为JSX.它通常不是有效的JavaScript,因为您的浏览器可能无法获取它,但通过转换器,您可以实现正确的JavaScript.

在上面的链接中,您还将看到如何立即编写有效的JavaScript,避免使用JSX语法.(这是转换器将生成的).

以下示例来自Facebook 上面链接的JSX深度指南

var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

如您所见,在输出部分,React定义了一个为您执行渲染的方法, React.createElement