React高级指南(七)【React Without JSX】
来源:互联网 发布:淘宝消费贷款怎么申请 编辑:程序博客网 时间:2024/05/29 09:18
React Without JSX
对于React来说,并不一定需要使用JSX. 如果不想在构建环境下设置编译器,使用React而不使用JSX非常的方便。
每一个JSX元素都是调用React.createElement(component, props, ...children)
的语法糖,因此,使用JSX所做的任何事都可以通过纯JavaScript实现。
例如,下面代码是通过JSX实现的:
class Hello extends React.Component { render() { return <div>Hello {this.props.toWhat}</div>; }}ReactDOM.render( <Hello toWhat="World" />, document.getElementById('root'));
可以被编译成不使用JSX的代码:
class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); }}ReactDOM.render( React.createElement(Hello, {toWhat: 'World'}, null), document.getElementById('root'));
如果你想查看更多JSX如果转化为JavaScript的实例,你可以尝试在线Babel编译器
组件可以通过字符串提供,也可以通过React.Component
的子类提供,或者通过普通函数实现的无状态组件。
如果你厌倦了使用React.createElement
,另一个常见的模式是将其赋值给一个缩写:
const e = React.createElement;ReactDOM.render( e('div', null, 'Hello World'), document.getElementById('root'));
如果你使用React.createElement
的缩写形式,就可以很方便的在不通过JSX情况下,使用React。
阅读全文
0 0
- React高级指南(七)【React Without JSX】
- React高级指南(一)【JSX In Depth】
- React高级指南(六)【React Without ES6】
- React JSX
- React JSX
- react和react jsx基础
- React——JSX
- React-JSX详解
- React-JSX详解
- React之JSX入门
- React(2)--JSX
- React之JSX语法
- React(1) JSX
- React(2) JSX语法
- React 入门-JSX
- React:JSX进阶
- React之JSX语法
- React/JSX 编码规范
- Haskell lesson:类型系统解读
- 开源的单点登录系统CAS入门
- C++必知必会——读书笔记(1)
- Computer Transformation UVA
- Unity Navmeshagent与飞行
- React高级指南(七)【React Without JSX】
- 计蒜客 最长公共子序列
- 1001. 害死人不偿命的(3n+1)猜想 (15)
- C语言进阶-第17讲:链表和数组的比较
- 感悟
- 以太坊开发(1)private network
- win10下安装wampserver和Mantis
- 看了一本C++11的书
- pygame入门小游戏(外星人入侵(2)设置背景颜色和添加背景图)