Props(属性)
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props
(属性)。
以常见的基础组件Image
为例,在创建一个图片时,可以传入一个名为source
的 prop 来指定要显示的图片的地址,以及使用名为style
的 prop 来控制其尺寸。
译注:在 iOS 上使用 http 链接的图片地址可能不会显示,参见这篇说明修改。从 Android9 开始,也会默认阻止 http 请求,请参考相关配置
请注意{pic}
外围有一层括号,我们需要用括号来把pic
这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式,需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。
自定义的组件也可以使用props
。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在函数中引用props
,然后按需处理即可。下面是一个例子:
我们在Greeting
组件中将name
作为一个属性来定制,这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting
组件写在 JSX 语句中,用法和内置组件并无二致——这正是 React 体系的魅力所在——如果你想搭建一套自己的基础 UI 框架,那就放手做吧!
上面的例子出现了一样新的名为View
的组件。View
常用作其他组件的容器,来帮助控制布局和样式。
仅仅使用props
和基础的Text
、Image
以及View
组件,你就已经足以编写各式各样的 UI 组件了。要学习如何动态修改你的界面,那就需要进一步学习 State(状态)的概念。