React扩展：fragmentContext

Posted 2022-12-23 劳埃德·福杰

目录

1.fragment

fragment标签能包裹其它标签，但最后不会渲染到DOM树上。

import React,  Component, Fragment  from 'react'

export default class Demo extends Component 
  render() 
    return (
      <Fragment>
        <input type="text" />
        <input type="text" />
      </Fragment>
    )
  

通常来说，render函数返回的东西需要用<div></div>包裹。用fragment标签包裹，最后fragment也不会被渲染，相较于前者，能少一对<div></div>。

2.Context

父子组件间通信用props就行，祖组件和后代组件之间(间隔不止一代)通信用Context。
应用开发中一般不用Context，一般都用它封装React插件。

/src/components/Demo/index.jsx

import React,  Component  from 'react'
import './index.css'

// 创建Context对象
const MyContext = React.createContext();
const Provider,Consumer = MyContext
export default class A extends Component 

  state = username:'tom'

  render() 
    const username = this.state
    return (
      <div className='parent'>
        <div>A组件</div>
        <div>用户名：username</div>
        <Provider value=username>
          <B />
        </Provider>
      </div>
    )
  


class B extends Component 
  render() 
    return (
      <div className='child'>
        <div>B组件</div>
        <C />
      </div>
    )
  


/*
// 类式组件
class C extends Component 
  // 声明接收context
  static contextType = MyContext
  render() 
    return (
      <div className='grandchild'>
        <div>C组件</div>
        <div>从A组件接收到的用户名：this.context</div>
      </div>
    )
  

*/

// 函数式组件
function C() 
  return (
    <div className='grandchild'>
      <div>C组件</div>
      <div>从A组件接收到的用户名：
        <Consumer>
           value =>  `$value` 
        </Consumer>
      </div>
    </div>
  )

/src/components/Demo/index.css

.parent
  width: 500px;
  background-color: orange;
  padding: 5px;  


.child
  width: 400px;
  background-color: skyblue;
  padding: 5px;


.grandchild
  width: 300px;
  background-color: red;
  padding: 5px;

 3.