JSX 语法
1直接声明:
- // 可直接在变量名赋值 html 代码
- const element = <h1>Hello, world!</h1>;
2使用表达式声明:
- // 定义一个函数 myMsg
- function myMsg(user){
- return '我叫' + user.name + ', 我今年' + user.age + '岁';
- }
- // 定义变量 user
- const user = {
- name: 'LJ',
- age: 20
- }
- // 定义变量 element , 并执行 myMsg 函数传参 user
- const element = (
- <h1>
大家好,{myMsg(user)}!
</h1>
)
执行 React 渲染代码
- // 注意 const 不能定义两次相同的变量名
- ReactDOM.render(
- element,
- document.getElementById('root')
- )
代码:
效果:
3 JSX 属性
- // 使用引号来定义以字符串为值的属性
- const element = <div tabIndex = '0'></div>;
- const element01 = (
- <h1 className="myClassName">
- Hello, React
- </h1>
- )
- // 也可以使用大括号来定义以 Javasctipt 表达式为值的属性:
- const element = <img src={user.imgUrl} />;
注意!
因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称, 而不是使用 HTML 的属性名称.
例如, class 变成了 className, 而 tabindex 则对应着 tabIndex.
来源: http://www.css88.com/qa/react/14185.html