React學習筆記 - 組件&Props

React Learn Note 4

React學習筆記（四）

標簽（空格分隔）： React JavaScript

---

三、組件&Props

組件可以將UI切分成一些獨立的、可復用的部件，這樣你就只需專注於構建每一個單獨的部件。

組件接收props，返回react元素。

1. 函數定義\類定義組件

最簡單組件方式 - 函數定義組件：

// 函數定義組件
function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}

ES6 class定義組件，效果同上：

// ES6 class定義組件
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

2. 組件渲染

將組件作為React元素，標簽的屬性作為props鍵值：

const element5_1 = <Welcome name="Sara"></Welcome>;
ReactDOM.render(
    element5_1,
    document.getElementById('root5')
);

**警告:** 組件名稱必須大寫字母開頭。

3. 組合組件

React組件也可以嵌套。

function App() {
    return (
        <div>
            <Welcome name="Bob"></Welcome>
            <Welcome name="Cahal"></Welcome>
            <Welcome name="John"></Welcome>
        </div>
    );
}

ReactDOM.render(
    <App></App>,
    document.getElementById('root6')
);

**警告:** 組件的返回值只能有一個根元素。所以將多個`Welcome`元素用`div`包裹。

4. 提取組件

可以將組件切分為更小的組件。

function formatDate(date) {
    return date.toLocaleTimeString();
}
function Comment(props) {
    return (
      <div className="Comment">
          <div className="UserInfo">
              <img src={props.author.avatarUrl} alt={props.author.name}/>
              <div className="UserInfo-name">
                  {props.author.name}
              </div>
          </div>
          <div className="Comment-text">
              {props.text}
          </div>
          <div className="Comment-date">
              {formatDate(props.date)}
          </div>
      </div>
    );
}

ReactDOM.render(
    <Comment author={{avatarUrl: '../static/img/zhifibao_key.jpg', name: 'Jessie'}} text="This is comment text." date={new Date()}></Comment>,
    document.getElementById('root7')
);

這個組件接收author(對象)、text(字符串)、以及date(Date對象)作為props。是個復雜的組件。接下來我們提取拆分這個組件。

首先提取Avatar組件：

// 提取組件
function Avatar(props) {
    return (
        <img src={props.user.avatarUrl} alt={props.user.name} className="Avatar"/>
    );
}

function UserInfo(props) {
    return (
        <div className="UserInfo">
            <Avatar user={props.user}></Avatar>
            <div className="UserInfo-name">
                {props.user.name}
            </div>
        </div>
    );
}

// 最終Comment組件被簡化為
function Comment2(props) {
    return (
        <div className="Comment">
            <UserInfo user={props.author}></UserInfo>
            <div className="Comment-text">
                {props.text}
            </div>
            <div className="Comment-date">
                {formatDate(props.date)}
            </div>
        </div>
    );
}

ReactDOM.render(
    <Comment2 author={{avatarUrl: '../static/img/zhifibao_key.jpg', name: 'Xiaoyu Lee'}} text="Wow, this is very beautiful." date={new Date()}></Comment2>,
    document.getElementById('root8')
);

5. Props的只讀性

無論是使用函數或是類來聲明一個組件，它決不能修改它自己的props。

The end...    Last updated by: Jehorn, Jan 07, 2018, 5:44 PM

• React學習筆記（一）- Hello World
• React學習筆記（二）- JSX簡介
• React學習筆記（三）- 元素渲染
• React學習筆記（四）- 組件&Props