Detailed explanation of how to use parent components "outside" React components

This article mainly introduces the detailed explanation of how to use the Props of the parent component "outside" the React component. Now I share it with you and give you a reference.

I encountered a problem when writing an SDK project: use the default theme when initializing the SDK in the live broadcast room, and use other themes when initializing the SDK on the topic page. The default theme is hung in the global environment during packaging for use by multiple pages. Customized themes need to be passed in when initializing the SDK.

It is very simple to implement. Determine whether there is a customized theme. If so, use the customized theme. If not, use the default theme. Most of the basic components under the project are like this:

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>
  )
}

The custom theme is passed in through the initialization SDK. The sub-components can be obtained through props or context, but they cannot be used directly in styles outside the class.

So how to use the Props of the parent component "outside" the component? If we can hang the Props we need to use in the "global environment", then can't we use them casually?

The project structure is as follows:

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

First, create a new customTheme.js file in services with the following content:

let value = {}

export default () => {

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

 const getTheme = () => {
  return value
 }

 return {
  setTheme,
  getTheme,
 }
}

In the index.js file we can get the initialization The custom theme object passed in from the SDK. Here we store this object in the value in customTheme.js:

import customTheme from './services/customTheme'

...

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

...

In this way, you can directly get the value of customTheme in other places

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>
  )
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Referring to bmob js-sdk in VUE (detailed tutorial)

How to pass v-for in vue Processing arrays

How to implement favorites using vue

In node.js, npm and webpack configuration methods

How to format the current time through js?

The above is the detailed content of Detailed explanation of how to use parent components "outside" React components. For more information, please follow other related articles on the PHP Chinese website!