四 组件间的通讯

组件都是独立封闭的
props主要的作用和功能就是接收传递给组件的数据,只读不能修改
传递数据都是通过属性来传递 接收都是通过props来实现

函数组件传值

//props函数组件
const App =(props)=>{
  console.log(props);
  return(
    <div>
      <h1>props {props.name}</h1>
    </div>
  )
}
 ReactDOM.render(<App name="hx" age="18"></App>,document.getElementById('root'));

函数组件通过props传值

类组件传值

//props类组件
class App extends React.Component{
  render(){
    console.log(this.props);
     return(
      <div>
        <h1>props:{this.props.name} {this.props.name}</h1>
      </div>
    )
  }

类组件

传递数组: colors={['red','green']}
传递函数: fn={()=>{console.log("哈哈哈哈")}}

---