【React學習筆記】從零開始編寫一個React組件

一、第一個組件 Hello World

在vue中，一個組件就是一個vue對象，分爲template、script、style三部分。（使用插件建立vue對象的時候會自動生成這三部分代碼的框架）

而在react中，組件能夠是一個方法（方法對象），也能夠是一個react組件對象。若是是方法，則該方法return的對象就是組件的內容（實際渲染的代碼），若是是react組件對象，則爲render()方法的return對象。

下面用兩種方式建立Hello World對象。（第二種方式爲ES6的形式建立對象，固然也能夠使用ES5的形式React.createClass）

Welcome.js

// 定義方法對象
function Welcome() {
    return <h1>Hello World</h1>;
}

// 導出對象
export default Welcome;

Welcome2.js

import React from 'react';

// 定義對象
class Welcome2 extends React.Component {
    render() {
        return <h1>Hello World 2</h1>;
    }
}

// 導出對象
export default Welcome2

將兩個子組件導入並添加到APP中

APP.js

import logo from './logo.svg';
import './App.css';
import React from "react";
import Welcome from './components/Welcome'      // 引入Welcome對象
import Welcome2 from './components/Welcome2'    // 引入Welcome2對象

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>

                {/* 添加對象Welcome*/}
                <Welcome/>

                {/* 添加對象Welcome2*/}
                <Welcome2/>
            </header>
        </div>
    );
}

export default App;

啓動項目，打開瀏覽器發現兩個組件已經顯示在頁面上。

二、組件間傳值 （父=>子）

在vue中，父組件向子組件傳值，須要先在子組件的props對象中定義須要用到的變量。而react中不須要提早定義就能夠直接使用。（須要注意的是，class和for是js的保留字，使用到這兩個參數名的時候須要改爲className和htmlFor）

Title.js

import React from 'react';

class Title extends React.Component {
    render() {
        return <h1>Title : {this.props.title}</h1>;     // 直接從this.props中獲取傳入的參數值
    }
}

export default Title

將子組件導入並添加到APP中

APP.js

import logo from './logo.svg';
import './App.css';
import React from "react";
import Title from "./components/Title";

function App() {

    let title = 'I am title.';

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                {/* 將變量title的內容傳遞給子組件的title變量 */}
                <Title name='myTitle' title={title}/>
            </header>
        </div>
    );
}

export default App;

運行結果：

三、組件間傳值 （子=>父）

在vue中，子組件向父組件傳值，最簡單的狀況下只要父組件在v-model上綁定對應的參數，子組件中使用this.$emit("input", newData)方法就能夠將值傳出到父組件。而在react中，須要使用子組件觸發父組件的方法來達到傳參的目的。

定義一個簡單的子組件，輸入框的onChange時間綁定上父組件傳入的handleChange方法。當input的值改變的時候，會觸發這個方法。

Addr.js

import React from 'react';

class Addr extends React.Component {
    render() {
        return (
            <input onChange={this.props.handleChange}/>
        );
    }
}

export default Addr;

將子組件導入並添加到APP中，定義一個getAddr方法，設置到子組件的handleChange屬性上，當子組件觸發這個方法的時候將event中的值打印出來。

App.js

import logo from './logo.svg';
import './App.css';
import Addr from './components/Addr'
import React from "react";

function App() {

    let getAddr = function (event) {
        console.log(event.target.value)
    }

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo"/>
                <Addr handleChange={getAddr}/>
            </header>
        </div>
    );
}

export default App;

運行之後在輸入框中輸入內容

能夠發現，在子組件的輸入框中輸入的內容已經由父組件（APP）打印在了控制檯裏。