类组件基本使用及组件通信

1、类组件基本使用

实际上我们的JSX是包含两部分的：

  • React元素
  • React组件
// React元素
const element = <div />
// React组件
const element = <Welcome name="Sara" />

定义一个组件，就是标签名首字母要大写，在React18中有两种定义组件的写法：

  • 函数组件
  • 类组件

下面分别给大家演示一下，如何定义一个React组件，代码如下：

// 函数组件
function Welcome(props){
    return (
        <div>hello world, {props.msg}</div>
    );  
}
let element = (
    <Welcome msg="hi react" />
);

// 类组件
class Welcome extends React.Component {
    render(){
        return (
            <div>hello world, {this.props.msg}</div>
        );
    }
}
let element = (
   <Welcome msg="hi react" />
);

2、组件通信

在上面组件中的msg就是组件通信的数据，可以实现父子传递数值的操作。

还可以传递函数给组件内部来实现子父通信操作。代码如下：

// 子组件
class Head extends React.Component {
    render(){
        this.props.getData('子组件的问候~~~')
        return (
            <div>Head Component</div>
        );
    }
}
// 父组件
class Welcome extends React.Component {
    getData = (data) => {
        console.log(data)
    }
    render(){
        return (
            <div>
                hello world, {this.props.msg}
                <br />
                <Head getData={this.getData} />
            </div>
        );
    }
}