03 React 组件传值父传子

10===> 传递参数
import React from "react" //一定要导入React

// 函数类型去创建组件
export function Web1(props){
    return <div>
              我是以函数的形式创建的组件
              <p> {props.name}</p> 
        </div>
}

// 以类的形式创建组件  这一种传递参数要使用 this  它是挂载到实例上的
export class Web2 extends  React.Component{
    render(){
        return <div>
                  我是类组件
                  <p> {this.props.name}</p>
                </div>
    }
}

 

使用的组件的页面
// 导入组件
import {Web1,Web2} from "./components/CompType"

{/* 使用组件 */}
<Web1 name="传值1"></Web1>
<Web2 name="传值2"></Web2>

注意 React的组件是尊循单项数据流  没有双向绑定  你去操作会报错