【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）打印在了控制台里。