react组件之间的传值

分享一个很可爱的图hhh~

react具有单向数据流的特点，子组件只能使用父组件所传的值但不能修改。
父组件通过属性向子组件传值，子组件通过方法反过来去调用父组件的数据，最终相当于是父组件自己修改的数据

例：实现一个TodoList的删除item功能

父组件TodoList.js

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

class TodoList extends Component{

    constructor(props){
        super(props);
        this.state={
            list:['React','JavaScript']
        }
        this.removeData=this.removeData.bind(this);
    }

    render(){
        return (
            <Fragment>
                <div>
                    <input value={this.state.inputValue}/>
                    <button>提交</button>
                </div>
                <ul>
                    {this.getTodoItem()}
                </ul>
            </Fragment>
        );
    }

    getTodoItem(){
        return (
            this.state.list.map((item,index)=>{
                return (
                    <TodoItem
                        content={item}
                        index={index}
                        key={index}
                        removeItem={this.removeData}
                    />
            );
        }))
    }

    removeData(index){
        this.setState((prevState)=>{
            const list=[...prevState.list];
            list.splice(index,1);
            return {list}
        });
    }
}

export default TodoList;

子组件TodoItem.js

import React,{Component} from 'react';

class TodoItem extends Component{
    constructor(props){
        super(props);
        this.handle=this.handle.bind(this);
    }

    render(){
        const {content}=this.props;
        return (<li
                    onClick={this.handle}
                >{content}</li>);
    }

    handle(){
        const {removeItem,index}=this.props;
        removeItem(index);
    }
}

export default TodoItem;

要注意this指向，此处的this.removeData是在constructor中设置后的哟~

效果如下（点击li标签便可删除）