React高级指南(七)【React Without JSX】
发布时间:2020-12-15 06:40:54 所属栏目:百科 来源:网络整理
导读:React Without JSX 对于React来说,并不一定需要使用JSX. 如果不想在构建环境下设置编译器,使用React而不使用JSX非常的方便。 每一个JSX元素都是调用 React.createElement(component,props,...children) 的语法糖,因此,使用JSX所做的任何事都可以通过纯Ja
React Without JSX对于React来说,并不一定需要使用JSX. 如果不想在构建环境下设置编译器,使用React而不使用JSX非常的方便。 每一个JSX元素都是调用 例如,下面代码是通过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编译器 组件可以通过字符串提供,也可以通过 如果你厌倦了使用 const e = React.createElement;
ReactDOM.render(
e('div','Hello World'),document.getElementById('root')
);
如果你使用 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |