ReactJSX


备注

JSX是一个预处理器步骤 ,它为JavaScript添加了XML语法。你绝对可以在没有JSX的情况下使用React,但JSX使React更加优雅。

就像XML一样,JSX标签有标签名称,属性和子标签。如果属性值包含在引号中,则该值为字符串。否则,将值包装在大括号中,值是随附的JavaScript表达式。

从根本上说,JSX只为React.createElement(component, props, ...children)函数提供语法糖。

那么,以下JSX代码:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

编译为以下JavaScript代码:

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

总之,请注意JSX的以下行既不是字符串也不是HTML

const element = <h1>Hello, world!</h1>;

它被称为JSX,它是JavaScript语法扩展 。 JSX可能会提醒您一种模板语言,但它具有JavaScript的全部功能。

React团队在他们的文档中说他们建议使用它来描述UI应该是什么样子。

JSX 相关例子