Introducing JSX(翻译)
开始学习React从过一遍官网资料开始。 introducting JSX原文 翻译并不准确,还是看原文好。 JSX介绍看下面的代码 const element = <h1>Hello,world</h1> 这个有趣的连接语法既不是字符串也不是HTML。 JSX生产React「元素」。在下一节我们将探索渲染React元素到DOM的过程。从下面的例子你能够学到JSX的基础知识。 表达式嵌套在JSX中你可以将JavaScript表达式通过花括号嵌套在JSX中使用。 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') ); 当我们书写多行JSX代码时候,为了良好的可读性,虽不是必须,但还是推荐使用括号包裹避免产生JavaScript分号自动插入的问题。 JSX也是一种表达式通过编译之后,JSX表达式会编译成为一个普通的JavaScript对象。 function getGreeting(user) { if (user) { return <h1>Hello,{formatName(user)}!</h1>; } return <h1>Hello,Stranger.</h1>; } 在JSX中定义属性你可以使用引号标注字符串作为属性值; const element = <div tabIndex="0"></div>; 你也可以用在花括号中写JavaScript表达式作为属性值; const element = <img src={user.avatarUrl}></img>; 注意不要给表达式加引号,不然JSX会将该表达式作为字符串处理。所以,你应该要么字符串加引号使用,要么花括号中写表达式,不要两者同时用。 在JSX中定义Children(?)如果标签不闭合,可以通过 const element = <img src={user.avatarUrl} />; JSX标签包含子元素 const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> ); 警告:JSX语法相比HTML更接近JavaScript,React DOM使用`camelCase`(驼峰命名)属性命名规定代替HTML属性名。 例如:`class`在JSX中是`className`,`tabindex`是`tabIndex`。 JSX可以防止注入攻击(XSS)通过JSX传入数据会更安全 const title = response.potentiallyMaliciousInput; // This is safe: const element = <h1>{title}</h1>; 默认情况,React DOM在渲染JSX之前会排除嵌入的输入值,因此确保在你的应用中不会注入任何不明确的书面值。任何值在渲染之前都会转换为字符串。这就避免了XSS攻击。 JSX表现为对象Babel通过调用 const element = ( <h1 className="greeting"> Hello,world! </h1> ); const element = React.createElement( 'h1',{className: 'greeting'},'Hello,world!' );
// Note: this structure is simplified const element = { type: 'h1',props: { className: 'greeting',children: 'Hello,world' } }; 这些对象称之为「React元素」.你可以把他们当做你想在界面上看到一种描述。React读取这些对象,然后使用它们去构造DOM元素,并且保持更新。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |