< 关於 React: 开始打地基| 拆解Component>

09-06-2021

本章内容

拆解Component，让大家一起分工合作吧！
- 组合 Component
- 抽离 Component
Props 特性
使用Props 传递
- 使用props时的判断情境

拆解Component，让大家一起分工合作吧！

组合 Component

说明：

Component可以在输出时引用其他的component，像是表单、按钮、对话匡、整个画面，我们都能用component的方式呈现。

function Doggy(props) {
  return <h1>我是可爱的, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Doggy name="狗狗" />
      <Doggy name="猫猫" />
      <Doggy name="兔兔" />
    </div>
  );
}

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

解释：

所以在App()这个画面中，我们可以同时看到三个<h1>分别是：

我是可爱的，狗狗
我是可爱的，猫猫
我是可爱的，兔兔

抽离Component

一个Component中我们可以继续抽离分成更小的component，更方便於管理与维护。

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          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>
  );
}

解释：

 <div className="UserInfo">
    <img className="Avatar"
        src={props.author.avatarUrl}
        alt={props.author.name}
    />
 // 这里的img内的属性，使用了author的名称传入资讯  
 // props(传递方式).author(props名称).avatarUrl(定义好的内容)

你知道上面的内容共拆分成几个props传入吗？

答案是：三个，props.author、props.text、props.date

Props 特性

无论是 function 、 class function 来宣告component，都==绝对不能==修改自己的props。
所有的React component 使用都必须让props维持最初的传递时的样子。

使用props 传递

解释：

<PropsDisplayer myProp="Hello" /> 带着myProp="Hello"，属性为myProp的字串Hello。
在<PropsDisplayer>的component 里面，先取了一个变数stringProps将传递进来的props使用JSON.stringify()解构成我们要的字串，并以{stringProps}变数被render显示。

范例：
import React from 'react';
import ReactDOM from 'react-dom';
class PropsDisplayer extends React.Component {
  render() {
    const stringProps = JSON.stringify(this.props);
    return (
      <div>
        <h1>CHECK OUT MY PROPS OBJECT</h1>
        <h2>{stringProps}</h2>
      </div>
    );
  }
}
ReactDOM.render(<PropsDisplayer myProp="Hello" />,document.getElementById('app'))

再来一个范例：
在render 时直接置换掉 {this.props.firstName}! 内的firsrname!

import React from 'react';
import ReactDOM from 'react-dom';
class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}!</h1>;
  }
}
ReactDOM.render(
  <Greeting firstName='Groerta' />, 
  document.getElementById('app')
);

使用props时的判断情境

在 props 中设定if判断式，判断传递进来的props.signedIn如果是false就显示GO AWAY
否则显示Hi there, {this.props.name}!

// Greeting.js
import React from 'react';
import ReactDOM from 'react-dom';
export class Greeting extends React.Component {
  render() {
    if (this.props.signedIn === false) {
      return <h1>GO AWAY</h1>;
    } else {
      return <h1>Hi there, {this.props.name}!</h1>;
    }
  }
}

在要显示的app.js 中，为Greeting 多增加一个参数并且打开变成true，即是要显示的意思


//App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Greeting } from './Greeting';
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>
        <Greeting name="Alison" signedIn={true} />
        <article>
          Latest:  where is my phone?
        </article>
      </div>
    );
  }
}
ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

对啊，改天来为传递方式做一篇详细说明。

总结：

Stateless Functional Components 目前最新版本的React，function components 可以执行 class components 可以做的事情

// 一般写法:
export class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>;
  }
}


// 使用stateless functional component:
export const MyComponentClass = () => {
  return <h1>Hello world</h1>;
}