OMI | OMI

Provide / Inject

跨域多个层级向下传递 props 有时非常麻烦，这个时候可以使用 provide 和 Inject 跨组件层级传递。

tsx

@tag('parent-el')
class ParentEl extends Component {

  provide = {
    name: 'omi'
  }

  render() {
    return <child-el></child-el>
  }
}

//不仅仅是子，在任意子孙曾孙节点都可以使用 inject 来消费祖先节点的注入
@tag('child-el')
class MyElement extends Component {

  inject = ['name']

  render() {
    //output: <div>omi</div>
    return <div>{this.injection.name}</div>
  }
}

@tag('parent-el')
class ParentEl extends Component {

  provide = {
    name: 'omi'
  }

  render() {
    return <child-el></child-el>
  }
}

//不仅仅是子，在任意子孙曾孙节点都可以使用 inject 来消费祖先节点的注入
@tag('child-el')
class MyElement extends Component {

  inject = ['name']

  render() {
    //output: <div>omi</div>
    return <div>{this.injection.name}</div>
  }
}

Provide / Inject ​

Provide / Inject