函数组件和基础布局

  1. 函数组件--属性
  • 属性:props
  • 它是我们组件标签上写的键值对的集合【对象】
  • 它的作用是:父组件向子组件传递数据用的
    【在工作中最多的就是传个数据】
  1. 组合模式 -- 组件组合模式
  • 高复用模式,说白了,就是一个子组件被多次的调用,传入不同的参数显示不同的内容
  • 插槽,就是在自定义组件中插入其他的组件

属性的认识

Q : 属性是什么?:一个对象特有的特征, 写在标签上的键值对,就是属性

  • 在react中,你写的div p... 看上去好像是原生的标签,其实,实际意义上并不是, 它只是看上去和原生的标签一样,但它叫jsx.也就是虚拟dom, 虚拟dom == js对象。
    用js代码写出来的标签,就是虚拟DOM
//react-project/src/index.jsx 
import React from "react";
export default () => {
    return (
        <div id="box" className="box" name="div">
            我是一个自定义组件
        </div>
    );
};
 // <div></div> 这个看上去和原生标签一样的div,实际上是下面这个东西,所以,在属性中class它是es6里的类关键词,所以不能直接用,用className替代...
 //在react中,无论是自定义组件还是原始的jsx组件,它都有属性这个对象
 {
   type: "div",
   props: {
     id:'box',
     className: 'box',
     name: 'div'
    } // 属性
 }

属性的基础使用

无论是自定义组件还是原始的jsx组件它都会有一个属性的对象

props === 单词的名字不一定非要是 props 可以自定义,但是这个参数它就表示属性

props 在react中表示属性,简单的理解就是用来父组件传递子组件数据的一种方式

// react-project/src/index.jsx
import React from "react";
import "./style.css";
// 子组件
const Child = props => {
       // {} 只在我们标签里使用
       // {} :在react中表示什么,js执行的环境(js表达式),在react标签里要使用变量或者js的语句的时候,都需要放在{}表达式里才会执行,否则就成了字符串
    return <p className={props.className}>我是子组件 {props.name} </p>;
};
// 向外暴露的组件
export default () => {
    return (
        <div>
            我是一个自定义组件
      <Child name="zhangguangju" className="red" />
        </div>
    );
};

公共模块模板组件

模式有:复用模式、插槽模式 ...

// react-project/src/common.jsx -- 这是一个公用的模块模板组件
import React from 'react'
export default (props) => {
    console.log(props);
    return (
        // 父组件通过props传递过来的数据,必须要显示使用它,才可以显示出来
        <div className={props.className}>
            {props.text} {/* props.text就是使用传递过来的值  /  在标签里使用js语句,要放在{}中*/}
        </div>
    )
}
// react-project/src/index.jsx -- 父组件里使用模板组件
import React from 'react'
import Common from './common.jsx';
import './style.scss'
export default () => {  
    return <div className='app-box'>
        {/* 第一个模子组件,显示第一句,我是头部 */}
        <Common text="我是头部" className='header' />
        {/* 第二个模子组件,显示第一句,我是中间区 */}
        <Common text="我是中间区" className='main' />
        {/* 第三个模子组件,显示第一句,我是底部*/}
        <Common text="我是底部" className='footer' />
    </div>
}

这种就是复用模式,一个模子组件被多次使用

Last modification:April 26th, 2020 at 05:10 pm
如果觉得我的文章对你有用,请随意赞赏
欢迎在评论区打卡!