Explication détaillée de la façon d'utiliser les composants parents "en dehors" des composants React

Cet article présente principalement en détail comment utiliser les Props du composant parent "en dehors" du composant React. Maintenant, je le partage avec vous et lui donne une référence.

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. Les sous-composants peuvent être obtenus via des accessoires ou un contexte, mais ils ne peuvent pas être utilisés 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 l'index Fichier .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 obtenir directement la valeur. de thème personnalisé dans 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>
  )
}

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Faire référence à bmob js-sdk dans VUE (tutoriel détaillé)

Comment passer v-for dans vue Traitement des tableaux

Comment implémenter les favoris à l'aide de vue

À propos des méthodes de configuration npm et webpack dans node.js

Comment formater l'heure actuelle via js ?

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!