react 父子组件传值

//父组件

import React, {Component} from 'react';

import {Todo} from './index.js'

import Zitodo from './zitodo'

class TodoList extends Component {

    constructor(props) {

        super(props);

        this.state = {

            arr: [true, false, false]

}

}

    handleChange = (i) => {

        const arr = this.state.arr.map((item, index) => {

            if (index === i) return true;

            return false

        });

        this.setState({

            arr

        });

      // console.log(arr)

    };

    render() {

        const data = Todo;

        // console.log(data)

        return (

            <div>

{

                    //将对象返回成数组

                    Object.keys(data).map((item, index) => {

                        return (
                          {/* 子组件将父组件需要的内容传入*/}
                            <Zitodo

                                key={index}

                                {...data[item]}

                                show={this.state.arr[index]}

                                change={this.handleChange}

                                index={index}

/>

)

})

}

            </div>

)

}

}

export default TodoList;

//子组件

import React, {Component} from 'react';

class Zitodo extends Component {

    constructor(props) {

        super(props);

        //console.log(props); //查看父组件传过来的内容是否成功

        this.state = {

            onOff: this.props.show

        }

}

    shouldComponentUpdate(nextProps, nextState) {
          
        if (this.state.onOff !== nextProps.show) {

            this.setState({

                onOff: nextProps.show

            })

}

        return true

    }

    handleClick = () => {

        const onOff = !this.state.onOff;

        this.props.change(this.props.index);

        this.setState({

            onOff

        });

        //console.log(onOff)

    };

    render() {

        const {floor, random} = Math;

        const color = (a, b) => {

            return floor(random() * (b - a + 1) + a)

};

        const {name, list} = this.props;

        return (

            <div style={{width: '200px'}}>

                <h2 style={{background: 'green'}}

                    onClick={this.handleClick}

>

                    {name}</h2>

                {/* 返回对象属性的name值*/}

{

                    this.state.onOff && (

                        <ol style={{background: 'pink'}}>

{

                                list && list.map((item, index) => {

                                    return (

                                        <li style={{background: `rgba(${color(0, 255)},${color(0, 255)},${color(0, 255)},.5)`}}

                                            key={index}>

                                            <p>{item.id}</p>

                                            <p>{item.name}</p>

                                            <p>{item.age}</p>

                                        </li>

)

})

}

                        </ol>

)

}

            </div>

);

}

}

export default Zitodo;

此内容仅供本人做笔记使用