在 JSX 中有几种不同的方式来指定属性。

使用 JavaScript 表达式

你可以任意地在 JSX 当中使用 JavaScript 表达式,在 JSX 当中的表达式要包含在大括号里。例如,在这个 JSX 中:

  1. <MyComponent foo={1 + 2 + 3 + 4} />

对于 MyComponent 来说, props.foo 的值为 10,这是 1 + 2 + 3 + 4 表达式计算得出的。
if 语句和 for 循环在 JavaScript 中不是表达式,因此它们不能直接在 JSX 中使用,所以你可以将它们放在周围的代码中。

  1. import Taro, { Component } from '@tarojs/taro'
  2. class App extends Components {
  3. render () {
  4. let description
  5. if (this.props.number % 2 == 0) {
  6. description = <Text>even</Text>
  7. } else {
  8. description = <Text>odd</Text>
  9. }
  10. return <View>{this.props.number} is an {description} number</View>
  11. }
  12. }

字符串常量

你可以将字符串常量作为属性值传递。下面这两个 JSX 表达式是等价的:

  1. <MyComponent message="hello world" />
  2. <MyComponent message={'hello world'} />

默认为 True

如果你没有给属性传值,它默认为 true。因此下面两个 JSX 是等价的:

  1. <MyTextBox autocomplete />
  2. <MyTextBox autocomplete={true} />

和 React/Nerv 的不同: React 可以使用 ... 拓展操作符来传递属性,但在 Taro 中你不能这么做。例如:

  1. const props = {firstName: 'Plus', lastName: 'Second'}
  2. return <Greeting {...props} />

这样的操作会报错。你只能手动地把所有需要引用的 props 写上去: <Greeting firstName="Plus" lastName="Second" />

嵌套

如果 JSX 标签是闭合式的,那么你需要在结尾处用 />, 就好像 XML/HTML 一样:

  1. const element = <Image src={user.avatarUrl} />;

JSX 标签同样可以相互嵌套:

  1. const element = (
  2. <View>
  3. <Text>Hello!</Text>
  4. <Text>Good to see you here.</Text>
  5. </View>
  6. )

JavaScript 表达式也可以嵌套:

  1. render () {
  2. const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  3. return (
  4. <ul>
  5. {todos.map((todo) => <Text>{todo}</Text>)}
  6. </ul>
  7. )
  8. }

布尔值、Null 和 Undefined 被忽略

falsenullundefinedtrue 都是有效的 children,但它们不会直接被渲染。下面的表达式是等价的:

  1. <View />
  2. <View></View>
  3. <View>{false}</View>
  4. <View>{null}</View>
  5. <View>{undefined}</View>
  6. <View>{true}</View>

这在根据条件来确定是否渲染 元素时非常有用。
以下的 JSX 只会在 showHeader 为 true 时渲染 <Header /> 组件。

  1. <View>
  2. {showHeader && <Header />}
  3. <Content />
  4. </View>