从开始学习React
接触到JSX
,就知道这个JSX
语法就是一个用于简化的代码的方式,React
并没有规定你一定要使用这个,你也可以用React.createElement(component,props,...children)
纯的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.createElement()
写法太麻烦了可以,这样转换
const e = React.createElement;
ReactDOM.render(
e('div',null,'Hello World'),document.getElementById('root')
);
就上面这些例子而言,我们可以非常明显看出,JSX
和纯javascript
两者实现同样效果的差异,显然,前者更能够帮助我们简化代码,理清代码的结构和层次,所以,千言万语汇成一句话,请使用JSX
下一篇将讲
React
中的更新
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。