React父子组件的传值操作

这里以案例的形式来记录：
准备两个组件，一个为Father，一个为Son，在页面上通过父子组件传值来显示hello world！

• 创立父组件，并将父组件挂到index中

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';

ReactDOM.render(
  <React.StrictMode>
    {/* JSX语法 */}
    <Father />
  </React.StrictMode>,
  document.getElementById('root')
);

父组件要点

• 拥有content值
• 拥有子组件占位
• 子组件的占位上要有自定义属性来连接父组件的content

// Father组件
import { Component, Fragment } from 'react'
import Son from './Son'

class Father extends Component {
    constructor(props) {
        super(props);
        this.state = {
            content: 'hello world!'
        }
    }
    render() {
        return (
            <Fragment>
                <div>
                    <Son content={this.state.content} />
                </div>
            </Fragment>
        )
    }
}

export default Father

子组件要点

• 使用this.props来接收到父组件中的content

// Son组件
import React, { Component } from 'react'

class Son extends Component {
    render() {
        const { content } = this.props
        return (
            <div>{content}</div>
        )
    }
}

export default Son