基础知识

css-module

react 将js转为vdom，react-dom将vdom转为dom

// 外面一层是一个动态值，里面的表示的是对象

<img src={logo} style = {{width: 200px}} />

webpack里配置的如果要用模块化作用需要模块化导出，形式如下

模块化css模块很有必要，将 css 文件命名为xxx.module.css，引入的时候赋予其名称，在标签上使用时带上名称和css属性名即可。

import style from './index.module.css'

// use

<img src={logo} className={style.img} />

问题：

多个className如何实现
公共样式和模块样式的使用
less语法的使用需要配置吗？

Context

import React, {Component} from 'react';

// 创建上下文

const Context = React.createContext();

// 创建提供者

const Provider = Context.Provider;

// 创建消费者

const Consumer = Context.Consumer;

function Child(props) {

  return (

    <button onClick={() => {

      props.addNum();

    }}>

      {props.number}

    </button>

  );

}

class ContextApp extends Component {

  constructor(props) {

    super(props);

    this.state = {

      number: 0

    };

  }

  addNum = () => {

    this.setState({

      number: this.state.number + 1

    });

  };

  render() {

    return (

      <Provider value={{ number: this.state.number, addNum: this.addNum }}>

        <Consumer>

          {value =>

            <Child {...value}/>

          }

        </Consumer>

      </Provider>

    );

  }

}

export default ContextApp;

组件复合

类比于vue的插槽功能

import React from 'react';

function Slot(props) {

  return (

    <div>{props.children}</div>

  );

}

// 复合组件的使用

function Composition(props) {

  return (

    <div>

      <Slot>

        <h1>我是标题</h1>

        <h3>我是内容</h3>

      </Slot>

    </div>

  );

}

export default Composition;

jsx是一个对象，我们返回具有名称的复合组件子组件可以通过 props.children.xxx 获得

import React from 'react';

function Slot(props) {

  return (

    <div>

      {props.children.body}

      {props.children.footer}

    </div>

  );

}

// 复合组件的使用

function Composition(props) {

  return (

    <div>

      <Slot>

        {{

          body: (

            <>

              <h1>我是标题</h1>

              <h3>我是内容</h3>

            </>

          ),

          footer: (

            <>

              <h1>我是Footer</h1>

            </>

          )

        }}

      </Slot>

    </div>

  );

}

export default Composition;

import React from 'react';

function Slot(props) {

  const file = {

    one: { values: 'aaa', keys: 333 },

    two: { values: 'bbb', keys: 444 },

  };

  // 传递值给插槽处

  const { body, footer } = props.children(file[props.fileId]);

  return (

    <div>

      {body}

      {footer}

    </div>

  );

}

// 复合组件的使用

function Compons(props) {

  return (

    <div>

      <Slot fileId={'one'}>

        {

          ({ values, keys }) => ({

            body: (<><h1>我是标题</h1><h3>value: {values}--- key:{keys}</h3></>),

            footer: (<><h1>我是Footer</h1></>)

          })

        }

      </Slot>

    </div>

  );

}

export default Compons;

高阶组件

接收一个组件作为参数，返回一个组件

巴特西

react 基础知识

基础知识

css-module

Context

组件复合

高阶组件

最新文章

热门文章