react基础 父子组件传递信息

1.父组件向子组件传递信息 （父组件通过属性向子组件传值）

A 页面  （父组件）

 

<TodoItem content={item}/>

B页面   （子组件）

<div>{this.props.content}</div>

2.子组件修改父组件的内容 （父组件向子组件传递一个方法，子组件通过接收的方法间接的操作父组件）

父组件

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


class TodoList extends  Component{

    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.list.map((item, index)=>{
                            return (
                                <div>
                                    <TodoItem
                                        deleteIntem={this.handleItemDelete.bind(this)}
                                    />
                                </div>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
 
    handleItemDelete(index) {
        ......
    }
}
export default TodoList

子组件调用夫组件的handleItemDelete方法，并对其修改

import React, {Component} from 'react';

class TodoItem extends Component{
    constructor(props) {
        super(props)
    }
    render() {
        return <div onClick={this.handleClick}></div>
    }
    handleClick () {
        const { deleteIntem, index} = this.props
        deleteIntem(index)
    }
}
export default TodoItem;