React 非親子コンポーネントパラメータ渡しのサンプルコード

'react' から React をインポートします
const {プロバイダー、コンシューマー} = React.createContext('default')
デフォルトのクラスContextDemoをエクスポートし、React.Componentを拡張します。
    状態={
        新しいコンテキスト:'createContext'
    }
  与える（） {
      const { newContext } = this.state
    戻る （
        <プロバイダー値={newContext}>
            <div>
                <label>子コンテンツ</label>
                <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
            </div>
            <息子 />
        </プロバイダー>
    ）
  }
}
クラスSonはReact.Componentを拡張します{
    与える（）{
        返す <消費者>
            {
                (名前)=>
                    <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}>
                        <p>サブコンポーネントによって取得されたコンテンツ: {name}</p>
                        <孫 />
                    </div>
                
            }
        
        </消費者>
    }
}
GrandsonクラスはReact.Componentを拡張します{
    与える（）{
        返す <消費者>
            {
                (名前)=>
                    <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}>
                        <p>孫コンポーネントによって取得されたコンテンツ: {name}</p>
                    </div>
                
            }
        
        </消費者>
    }
}

'react' から React をインポートします
'prop-types' から PropTypes をインポートします
クラスContextDemoはReact.Componentを拡張します。
    // 子コンテキストを取得する
    状態={
        新しいコンテキスト:'createContext'
    }
    子コンテキストを取得する(){
        {値:this.state.newContext} を返します
    }
  与える（） {
      const { newContext } = this.state
    戻る （
            <div>
                <div>
                    <label>子コンテンツ</label>
                    <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
                </div>
                <息子 />
            </div>
    ）
  }
}
クラスSonはReact.Componentを拡張します{
    与える（）{
        <div> を返す
            <p>子:{this.context.value}</p>
        </div>
    }
}
Son.contextTypes = {
    値:PropTypes.文字列
}
ContextDemo.childContextTypes = {
    値:PropTypes.文字列
}
エクスポートデフォルト（）=> 
  <コンテキストデモ>
  
  </コンテキストデモ>

'react' から React をインポートします

// 関数コンポーネントもref経由でdomを取得したい
const TargetFunction = React.forwardRef((props, ref) => (
    <input type="text" ref={ref}/>
))
デフォルトのクラスFrodWordRefDemoをエクスポートし、React.Componentを拡張します。
  コンストラクタ() {
    素晴らしい（）
    this.ref = React.createRef()
  }

  コンポーネントマウント() {
    this.ref.current.value = 'ref 入力を取得'
  }

  与える（） {
    <TargetFunction ref={this.ref}> を返します
    </ターゲット関数>
  }
}

'react' から React をインポートします
'pubsub-js' から PubSub をインポートします
デフォルトのクラスBroをエクスポートし、React.Componentを拡張します{
    状態 = {
        価値：''
    }

    与える（）{
        const {値} = this.state
        PubSub.subscribe('SOS',(res,data)=>{
            this.setState({
                値:データ
            })
        })
        戻る （
            <div>
                <h1>{value}</h1> を受け取りました
            </div>
        ）
    }
}

'react' から React をインポートします
'pubsub-js' から PubSub をインポートします
デフォルトのクラスChildrenをエクスポートし、React.Componentを拡張します{
    状態 = {
        価値：''
    }
    ハンドルチェンジ = (e) => {
        this.setState({
            値:e.target.value
        })
    }
    送信 = () => {
        const {値} = this.state
        PubSub.publish('SOS',値)
    }
    与える（）{
        const {値} = this.state
        戻る （
            <div>
                <input type="text" value={value} onChange={this.handelChange}/>
                <button onClick={this.send}>送信</button>
            </div>
        ）
    }
}