React的元素组件事件props传递

通过配置 webpack-dev-server 启动一个 webserver，自动编译，自动刷新浏览器的功能，我们开启 React 基础速过

接上一篇：构建 React 开发环境

使用 webpack-dev-server

按照上篇文章构建好 React 开发环境后，我们发现每次写完代码还需要手动编译，并且需要自己启动一个 webserver 才可以在浏览器预览效果。

如果你不想这样每次改完代码都要手动编译，而且自己启动 webserver，那么就要用到 webpack-dev-server 这个玩意。

注意，这玩意就是开发时用用的，不要用于生产环境！

这玩意还有一个好处，是在改完代码后，自动刷新浏览器，下面动手加上这货吧

使用 yarn 安装webpack-dev-server 到开发依赖中

yarn add -D webpack-dev-server

添加 webpack 配置，配置devServer

vi webpack.config.js

'use strict';

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    mode: 'development',
    entry: {app: './src/js/index'},
    output: {filename: "[name].js",
        path: path.join(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/pages/index.html'
        })
    ],
    module: {
        rules: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    },
    // 过滤
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },
    devServer: {contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    }
};

module.exports = config;

在 package.json 中添加一个scripts

"dev": "webpack-dev-server"

启动webpack-dev-server

yarn run dev

之后就可以自动编译并启动一个 webserver，用浏览器访问http://localhost:9000

React 的元素

React 的元素必须要有一个根元素包裹起来，如：

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

let me = <h1> 编程故事 </h1>

ReactDOM.render(
    me,        // 使用元素
    document.getElementById('root')
);

元素里面可以包含 js 的表达式，表达式使用大括号 {} 包起来

let me = <h1> 编程故事{alert('编程故事')}</h1>

React 的组件

React 的组件使用 ES2015 中的 Class 方式定义

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

// 组件可以外部定义然后在使用的地方在引入
class Me extends React.Component {render() {return <h1>dongjun{(function(){alert('编程故事')})()}</h1>
    }
}

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

React 组件的 props 传递

父组件给子组件传递数据，是通过给子组件上定义属性，在子组件中通过 this.props 获取

传递多个属性：

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {render() {return <h1>{this.props.site} - {this.props.sologen} - {this.props.url}</h1>
    }
}

ReactDOM.render(
    <Me site="编程故事" sologen="我的故事, 也许也是你的故事" url="https://www.mi360.cn" />,
    document.getElementById('root')
);

也可以传递一个对象给子组件的属性，在子组件也要通过对象的方式去获取

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {render() {return <h1>{this.props.site.name} - {this.props.site.sologen} - {this.props.site.url}</h1>
    }
}

const map = {
    name: '编程故事',
    sologen: '我的故事, 也许也是你的故事',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(<Me site={ map}/>,
    document.getElementById('root')
);

还可以使用 ES2015 中的解构赋值

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {render() {return <h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
    }
}

const map = {
    name: '编程故事',
    sologen: '我的故事, 也许也是你的故事',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(<Me { ...map}/>,
    document.getElementById('root')
);

React 的事件

在组件中定义事件处理方法，在组件的 render()方法中定义事件监听

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {showMe() {alert('编程故事');
    }

    render() {
        return <div>
            <h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
            <input onClick={this.showMe} type="button" value="按钮"/>
        </div>
    }
}

const map = {
    name: '编程故事',
    sologen: '我的故事, 也许也是你的故事',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(<Me { ...map}/>,
    document.getElementById('root')
);

还可以使用箭头函数直接在事件监听中处理

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {showMe() {alert('编程故事');
    }

    render() {
        return <div>
            <h1>{this.props.name} - {this.props.sologen} - {this.props.url}</h1>
            <input onClick={() => {alert('编程故事')
            }} type="button" value="按钮"/>
        </div>
    }
}

const map = {
    name: '编程故事',
    sologen: '我的故事, 也许也是你的故事',
    url: 'https://www.mi360.cn'
};

ReactDOM.render(<Me { ...map}/>,
    document.getElementById('root')
);

父组件传递数组给子组件遍历

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';

class Me extends React.Component {render() {
        return <div>
            {this.props.data.map((item) => {return <h1 onClick={() => {alert(item.name)
                }
                }>{item.name} - {item.sologen} - {item.url}</h1>
            })}
        </div>
    }
}

const map = [{
    name: '编程故事',
    sologen: '我的故事, 也许也是你的故事',
    url: 'https://www.mi360.cn'
},{
    name: '246 哈',
    sologen: '开心很简单',
    url: 'https://www.246ha.com'
}];

ReactDOM.render(<Me data={ map} />,
    document.getElementById('root')
);

原文链接：https://www.mi360.cn/articles…