Comment utiliser les accessoires du composant parent 'en dehors' d'un composant React

Cet article présente principalement en détail comment utiliser les Props du composant parent "en dehors" du composant React. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

J'ai rencontré un problème lors de l'écriture d'un projet SDK : utiliser le thème par défaut lors de l'initialisation du SDK dans la salle de diffusion en direct, et utiliser d'autres thèmes lors de l'initialisation du SDK sur la page du sujet. Le thème par défaut est suspendu dans l'environnement global lors de l'empaquetage pour être utilisé par plusieurs pages. Les thèmes personnalisés doivent être transmis lors de l'initialisation du SDK.

C'est très simple à mettre en œuvre. Déterminez s'il existe un thème personnalisé. Si c'est le cas, utilisez le thème personnalisé. Sinon, utilisez le thème par défaut. La plupart des composants de base du projet sont comme ceci :

import { h, Component } from 'lib/preact'
import csjs from 'lib/csjs'
import { theme } from 'lib/platform'

const styles = csjs`
  .app {
    background: ${theme.color};
  }
`

export default class App extends Component {
  render(
    <p className=&#39;styles.app&#39;></p>
  )
}

Le thème personnalisé est transmis via le SDK d'initialisation et le sous-composant peut être obtenu via accessoires ou contexte, mais ce n'est pas le cas. Il ne peut pas être utilisé directement dans des styles en dehors de la classe.

Alors comment utiliser les Props du composant parent "en dehors" du composant ? Si nous pouvons accrocher les accessoires dont nous avons besoin dans « l'environnement mondial », alors ne pouvons-nous pas les utiliser avec désinvolture ?

La structure du projet est la suivante :

.
|——src
| |——lib //公用库
| |——services //抽离出的方法
| |——index.js
| └──App
|   └──app.js
└── ...

Tout d'abord, créez un nouveau fichier customTheme.js dans les services avec le contenu suivant :

let value = {}

export default () => {

 const setTheme = (initColor) => {
  value = initColor
 }

 const getTheme = () => {
  return value
 }

 return {
  setTheme,
  getTheme,
 }
}

Dans le fichier index.js, nous pouvons obtenir l'objet de thème personnalisé transmis lors de l'initialisation du SDK. Ici, nous stockons cet objet dans la valeur dans customTheme.js : <🎜. >

import customTheme from './services/customTheme'

...

const setTheme = (customTheme() || {}).setTheme
setTheme && setTheme(customTheme)

...

De cette façon, vous pouvez directement obtenir la valeur de customTheme à d'autres endroits

import { h, Component } from 'lib/preact'
import csjs from 'lib/csjs'
import { theme } from 'lib/platform'
import customTheme from '../services/customTheme'
const getTheme = (customTheme() || {}).getTheme
const custom_theme = getTheme && getTheme()
const styles = csjs`
  .app {
    background: ${custom_theme.color || theme.color};
  }
`
export default class App extends Component {
  render(
    <p className=&#39;styles.app&#39;></p>
  )
}

Connexe recommandations :

Utiliser Store pour optimiser les composants React

Quelle est la fonction de cycle de vie du composant React

Composant React Exemples de communication entre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!