react父子组件传值

父组件给子组件传值

　　class类组件，父组件在子组件上写入属性，子组件通过this.props.属性名获取值

　　函数式组件，父组件在子组件上写入属性，子组件需要把props作为组件参数才能使用props

子组件给父组件传值

　　通过传递回调函数的方式，父组件给子组件传一个回调函数(可带参数)，子组件通过this.props.回调函数名，通过调用回调函数，传入参数来传值

父组件

// import React, { useState } from 'react'
// import A from './A'
// export default function F() {
//     const [list, setList] = useState([1, 2, 3])
//     return (
//         <div>
//             <A title='rql' list={list}></A>
//         </div>
//     )
// }

import React, { Component } from 'react'
import A from './A'
export default class F extends Component {
    state = {
        name: 'rql'
    }
    render() {
        return (
            <div>
                <A title="123" event={(value) => {
                    this.setState({
                        name: value
                    });
                }}></A>
                {this.state.name}
            </div>
        )
    }
}

子组件

// import React from 'react'

// export default function A(props) {
//     let { title, list } = props
//     return (
//         <div>
//             {title}{console.log(list)}
//         </div>
//     )
// }

import React, { Component } from 'react'

export default class A extends Component {
    render() {
        return (
            <div>
                {this.props.title}
                <button onClick={() => {
                    this.props.event('子组件给我父组件传的值')
                }}>按钮</button>
            </div>
        )
    }
}