[TOC]

从根本上讲,React语法仅仅是React.createElement(component, props, …children)方法的语法糖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//JSX代码
<MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>

//编译后:
React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)
如果标签没有子元素,可以使用闭口标签。

//JSX代码
<div className="sidebar" />

//编译后
React.createElement(
'div',
{className: 'sidebar'},
null
)
阅读全文 »

[TOC]

React有一个强大的组合模型,并且推荐组合代替继承,在组件间重用代码。

一些组件不能提前知道它们的子组件。它些问题在一些公共组件尤其明显。如:侧边栏或者弹出框等组件。

我们推荐这样的组件使用prop的特殊属性children,直接传递子元素到它们的输出中。

阅读全文 »

[TOC]

通常几个组件需要反映相同数据变化,我们推荐提升共享的state到它们最近的共同祖先元素。实现如下:

创建一个温度计算器来计算,给定温度的水是否会沸腾。

我们将从一个BoilingVerdict组件开始,它接收一个celsius作为prop参数,并且打印水温度。

阅读全文 »

[TOC]

渲染多个组件

你可以创建一个元素集合,通过‘{}’在JSX中使用

1
2
3
4
5
6
7
8
9
10
11
//创建元素集合
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);

//使用集合放到ul标签
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
阅读全文 »
0%