Question

页面往往有不少重复的元素，这时可以将这些元素抽离为独立的、可复用的部件，我们将这些部件称为组件。组件在概念上类似于 JavaScript 函数，它接收任意的参数（组件的参数称为“props”），然后返回一个可以被渲染的 Rax 元素。下面简单介绍组件的基本使用。

定义组件

有两种方式来定义组件。最简单和推荐的做法是使用 JavaScript 函数来定义一个组件：

function Welcome(props) {
  return <div>Hello, {props.name}</div>;
}

也可以使用 ES6 Class 来定义组件:

import { Component } from 'rax';

class Welcome extends Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

注意：自定义 Rax 组件必须以大写字母开头，比如 Welcome 不能写成 welcome。

使用组件

可以和普通元素一样使用自定义的组件：

const element = <Welcome name="Jack" />;

在 JSX 中使用自定义组件时，标签上的属性会作为 props 传递到组件中，下面的例子中，页面上将会显示Hello, Jack：

import { render } from 'rax';
import * as DriverDOM from 'driver-dom';

function Welcome(props) {
  return <div>Hello, {props.name}</div>;
}

render(
  <Welcome name="Jack" />,
  document.getElementById('example'), 
  { driver: DriverDOM }
);

组合组件

在组件中可以嵌套使用其他组件，因此我们可以把多个组件组合使用。在下面的例子中，我们在 Card 中使用了 CardTitle 和 CardContent：

import { createElement } from 'rax';

function CardTitle(props) {
  return <h1>{props.title}</h1>;
}

function CardContent(props) {
  return <p>{props.content}</p>;
}

export default function Card() {
  return (
    <div className="card">
      <CardTitle title="Rax" />
      <CardContent content="https://github.com/alibaba/rax" />
    </div>
  );
}