本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于Z.MJun的简书 ,感谢!<翻译不容易啊>
翻译于2017年6月27日,原文
变量描述
const element = <h1>Hello, world!</h1>;
这个Tag标识并不是String
,也不是HTML
>。这个标识是Js的一种扩展语法。推荐使用JSX来开发react。
以下说说JSX的基础内容
Embedding Expressions in JSX
可以嵌入任意的JS扩展到JSX的括号里面,如2+2
,user.fristName
和formatName(user)
都可以有以下表达方式
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')
);
代码规范在这里就不多说了,不过可以参考以上写法,这样可读性比较强,不容易出错。
Specifying Attributes with JSX
使用JSX指定属性。
可以使用引号指定字符嵌入属性中
const element = <div tabIndex="0"></div>;
也可以使用大括号把JS代码嵌入到属性中
const element = <img src={user.avatarUrl}></img>;
注意:使用引号里面只能是
string
类型,不能是JS代码。大括号内只能是JS代码,不能是string
类型。两者不能混淆。
Specifying Children with JSX
JSX的children
如果一个标签是空着,后面必须添加/>
,如XML
const element = <img src={user.avatarUrl} />;
JSX的标签包含子元素
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
特别注意:
JSX并不是HTML,而是JS。所以在命名的时候不要使用HTML的风格,应当使用JS的camelCase
驼峰试命名。
JSX Prevents Injection Attacks
必须提前声明所要嵌入的JS变量,如
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
未经申明的内容,不能提前嵌入。
JSX Represents Objects
JSX对象表达式,以下两个表达式都是一个意思
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
如果使用React.createElement()
来表达,会更好,能明显的减少问题发生。
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
这个构建函数叫React elements
。React元素。
提示:
如果选择使用ES6和JSX,建议了解下"Babel"的知识。
网友评论