How to use parent component's Props "outside" a React component

This article mainly introduces the detailed explanation of how to use the Props of the parent component "outside" the React component. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

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 customized theme is passed in through the initialization SDK. The sub-component can be obtained through props or context, but it cannot be obtained through props or context. Use it 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 custom theme object passed in when initializing 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>
  )
}

Related recommendations:

Use store to optimize React components

What is the life cycle function of React components

Examples of communication between React components

The above is the detailed content of How to use parent component's Props "outside" a React component. For more information, please follow other related articles on the PHP Chinese website!