首页 > 代码库 > React翻译官网文档之JSX
React翻译官网文档之JSX
什么是JSX？ 看下面的代码它被称为JSX，它既不是字符串也不是HTML，而是一种facebook公司对javascript语法的拓展。虽然写法很奇怪最终仍会会被编译为javascript代码
const element = <h1>Hello, world!</h1>;
你可以在JSX中嵌入任何javascript表达式，看下面的例子。
function formatName(user) { return user.firstName + ‘ ‘ + user.lastName;}const user = { firstName: ‘Harper‘, lastName: ‘Perez‘};const element = ( <h1> Hello, {formatName(user)}! </h1>);ReactDOM.render( element, document.getElementById(‘root‘));
点击codepen在线预览
本质上讲JSX语法中{} 接收表达式并进行运算，打开codepen在刚才的代码中，进行如下修改看看代码运行结果
function formatName(user) { return user.firstName + ‘ ‘ + user.lastName;}const user = { firstName: ‘Harper‘, lastName: ‘Perez‘};const element = ( <h1> {getGreeting(user)} </h1>);function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>;};ReactDOM.render( element, document.getElementById(‘root‘));
React翻译官网文档之JSX
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。