react组件传值

1、传输固定数据

在List组件中写一个Cartoon组件,接收一个对象{ name, animation }，再List组件中调用Cartoon组件，并传入两个值name,animation

// import React from 'react'

// eslint-disable-next-line react/prop-types
function Cartoon({ name, animation }) {
    return (
        <div className="cartoon">
            <h2>{name} --- {animation}</h2>
        </div>
    )
}

function List() {
    return (
        <div className="list">
            <Cartoon name='喜羊羊' animation='洋洋与狼' />
        </div>
    )
}

export default List

注意：如果Cartoon方法的name和animation报错：'name' is missing in props validation eslint(react/prop-types)

在Cartoon方法的上面添加 // eslint-disable-next-line react/prop-types

2、使用循环数组传值

在List中定义一个数组，以循环的形式像Cartoon组件传值，完整代码如下
 

// import React from 'react'

// eslint-disable-next-line react/prop-types
function Cartoon({ name, animation, joy, a }) {
    const clickHandle = () => {
        a(name, joy);
    }

    return (
        <div className="cartoon">
            <h2>{name} --- {animation}</h2>
            <button onClick={clickHandle}>按钮</button>
        </div>
    )
}

function List() {
    const cartoon = [
        {
            id: 1,
            name: '懒洋洋',
            animation: '羊羊与狼',
            joy: '睡觉'
        }, {
            id: 2,
            name: '灰太狼',
            animation: '羊羊与狼',
            joy: '平底锅'
        }, {
            id: 3,
            name: 'Tom',
            animation: 'Tom and Jerry',
            joy: 'Jerry'
        }

    ]
    const like = (name, joy) => {
        console.log(`${name}喜欢${joy}`);
    }

    return (
        <div className="list">
            {cartoon.map((item) => (
                <Cartoon key={item.id} {...item} a={like} />
            ))}

        </div>
    )
}

export default List

效果如下图