JSX

Download reactjs eBook

备注

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 <div>Hello {this.props.name}</div>;
  }
}

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

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

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

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

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

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

相关例子

Stats

63 Contributors: 2
Friday, March 3, 2017
许可下: CC-BY-SA

不隶属于 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下载电子书