React on Yazzyk's Blog

React Fragment

Mon, 27 May 2019 00:00:00 +0000

https://react.docschina.org/docs/fragments.html

Fragment相当于占位符吧，正常情况下，React中子组件只能返回一个Dom节点,而Fragment可以让你的子组件返回多个Dom节点

父组件

import React, { Fragment } from 'react';
import ToDoItem from './ToDoItem';

class ToDoList extends React.Component {
    constructor(props) {
        super(props);
        //组价状态
        this.state = {
            inputValue: '',
            list: []
        }
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnClick = this.handleBtnClick.bind(this);
        this.handleItemDel = this.handleItemDel.bind(this);
    }

    handleInputChange(msg) {
        this.setState({
            inputValue: msg.target.value
        })
    }

    handleBtnClick() {
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        })
    }

    handleItemDel(index) {
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({
            list: list
        })
        // console.log(index);
    }

    getToDoItem(){
        return this.state.list.map((item, index) => {
            return (
                <div key={index}>
                    <ToDoItem 
                    content={item} 
                    handleItemDel={this.handleItemDel} 
                    />
                </div>
            )
        })
    }

    render() {

        return (
            <Fragment>
                <input 
                    type="text"
                    value={this.state.inputValue}
                    onChange={this.handleInputChange}
                />
                <button 
                onClick={this.handleBtnClick}
                >
                    提交
                </button>
                <ul>
                    {this.getToDoItem()}
                </ul>
            </Fragment>
        )
    }
}

export default ToDoList;

子组件

React&Redux actionCreators

Mon, 27 May 2019 00:00:00 +0000

0x01 创建文件

创建actionCreators.js

import {INPUT_VALUE_CHANGE,ADD_TODO_ITEM,DEL_TODO_ITEM} from './ActionTypes';

export const getInputChangeAction = (value) =>({
    type : INPUT_VALUE_CHANGE,
    value
});

export const getAddItemAction = () =>({
    type: ADD_TODO_ITEM
});

export const getDelItemAction = (index)=>({
    type: DEL_TODO_ITEM,
    index
});

0x02 修改

修改ToDoList.js相关的地方

    handleInputChange(e) {
        const action = getInputChangeAction(e.target.value);
        store.dispatch(action);
    }

    handleBtnClick() {
        const action = getAddItemAction();
        store.dispatch(action);
    }

    handleItemClick(index) {
        const action = getDelItemAction(index);
        store.dispatch(action);
    }

React&Redux ActionTypes

Mon, 27 May 2019 00:00:00 +0000

0x00 前言

ActionTypes是为了防止在大型项目的开发中action中的type出现打错字之类的错误，此时，控制台不会报错，但功能异常。使用ActionTypes后，页面将会出现报错，减少排错时间

0x01 创建

创建ActionTypes.js文件

React之Redux工作流程

Mon, 27 May 2019 00:00:00 +0000

阮一峰

0x00

render函数

render() {
    return (
        <div style={{ width: '500px', padding: '10px' }}>
            <Input
                value={this.state.inputValue}
                style={{ width: "400px", marginRight: "15px" }}
                onChange={this.handleInputChange}
            />
            <Button
                type="primary"
            >
                提交
            </Button>
            <List
                bordered
                dataSource={this.state.list}
                renderItem={item => (
                    <List.Item> {item} </List.Item>
                )}
            />
        </div>
    )
}

0x01

在src下创建store/index.js
这里就创建好了Store

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore();

export default store;

0x02

在src/store下创建reducer.js