1. Übergabe von Komponenten
Ideen:
1- Erstellen Sie ein Kontextobjekt, um Provider- und Consumer-Objekte zu exportieren
const {
Provider, Consumer } = createContext()
2- Verwenden Sie das Provider-Paket, um Daten bereitzustellen (in der Stammkomponente).
<Provider value={
this.state.message}>
{
/* 根组件 */}
</Provider>
3- Die Komponente, die die Daten verwenden muss, verwendet das Consumer-Paket, um die Daten abzurufen
<Consumer >
{
value => /* 基于 context 值进行渲染*/}
</Consumer>
Der vollständige Code lautet wie folgt (Beispiel):
import React, {
createContext } from 'react'
// 1. 创建Context对象
const {
Provider, Consumer } = createContext()
// 3. 消费数据
function ComC() {
return (
<Consumer >
{
value => <div>{
value}</div>}
</Consumer>
)
}
function ComA() {
return (
<ComC/>
)
}
// 2. 提供数据
class App extends React.Component {
state = {
message: 'this is message'
}
render() {
return (
<Provider value={
this.state.message}>
<div className="app">
<ComA />
</div>
</Provider>
)
}
}
export default App
Zusammenfassen
Die App wird über A direkt an C übertragen:
Der Anbieter in der Root-Komponente App stellt die zu übertragenden Daten bereit, und der Consumer in der C-Komponente kann die von der App übertragenen Daten konsumieren. Da Komponente A mit Komponente C umschlossen ist, können wir beim Ausführen von Komponente C in Komponente A sehen, dass Komponente C tatsächlich die Daten von der App empfangen hat.