React基础_3(props.组件间通讯)

前言

组件间的通讯，主要内容为props的一些用法

正文

组件中的通信：
使用的是props，通过属性名=值的形式给组件传输数据，在函数组件中使用props使用数据，在类组件中使用this.props使用数据

function App(props){
   
    return (
        <div>
            <h2>props是:{
   props.name}</h2>
        </div>
    )
}

ReactDOM.render(<App name="zhao" />,document.getElementById('root'))

下面是类组件

class App extends React.Component{
   
    render(){
   
        return (
            <div>
                <h2>props是:{
   this.props.name}</h2>
            </div>
        )
    }
}

ReactDOM.render(<App name="zhao" />,document.getElementById('root'))

props可以接受很多种数据类型 数组 字符 函数 jsx结构，传其他类型的数据需要加{}，props只能够读取不可以修改，使用类组件时写了构造函数就需要给构造函数参数加props。

constructor(props){
   
        super(props)
    }

组件通讯的三种方法：
父组件->子组件
父组件提供state，通过props传递给子组件使用

class App extends React.Component{
   
    state={
   
        name:'zhao'
    }
    render(){
   
        return(
            <div>
                <Child name={
   this.state.name} />
            </div>