>  기사  >  웹 프론트엔드  >  React 컴포넌트 "외부"에서 상위 컴포넌트의 Prop을 사용하는 방법

React 컴포넌트 "외부"에서 상위 컴포넌트의 Prop을 사용하는 방법

小云云
小云云원래의
2018-01-15 09:12:131646검색

이 글은 주로 React 컴포넌트 "외부"에서 부모 컴포넌트의 Props를 사용하는 방법에 대한 자세한 설명을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

SDK 프로젝트 작성 시 문제가 발생했습니다. 생방송방에서 SDK를 초기화할 때 기본 테마를 사용하고, 토픽 페이지에서 SDK를 초기화할 때 다른 테마를 사용하세요. 기본 테마는 여러 페이지에서 사용하기 위해 패키징하는 동안 전역 환경에 걸려 있습니다. SDK를 초기화할 때 사용자 정의 테마를 전달해야 합니다.

구현이 매우 간단합니다. 맞춤 테마가 있는지 확인하세요. 그렇다면 맞춤 테마를 사용하세요. 프로젝트에 포함된 대부분의 기본 구성 요소는 다음과 같습니다.


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

사용자 정의 테마는 초기화 SDK를 통해 전달됩니다. 하위 구성 요소는 소품이나 컨텍스트를 통해 얻을 수 있지만 외부 스타일에서 직접 사용할 수는 없습니다. 수업.

그렇다면 구성 요소 "외부"에서 상위 구성 요소의 Prop을 사용하는 방법은 무엇입니까? "글로벌 환경"에서 사용해야 할 Props를 걸 수 있다면 부담없이 사용할 수는 없을까요?

프로젝트 구조는 다음과 같습니다.


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

먼저 다음 콘텐츠로 서비스에 새 customTheme.js 파일을 만듭니다.


let value = {}

export default () => {

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

 const getTheme = () => {
  return value
 }

 return {
  setTheme,
  getTheme,
 }
}

index.js 파일에서 전달된 사용자 정의를 얻을 수 있습니다. SDK 테마 개체를 초기화할 때 여기서는 이 개체를 customTheme.js의 값에 저장합니다.


import customTheme from &#39;./services/customTheme&#39;

...

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

...

이런 방식으로 다른 곳에서 customTheme의 값을 직접 가져올 수 있습니다


import { h, Component } from &#39;lib/preact&#39;
import csjs from &#39;lib/csjs&#39;
import { theme } from &#39;lib/platform&#39;
import customTheme from &#39;../services/customTheme&#39;
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>
  )
}

관련 권장 사항:

스토어를 사용하여 React 구성 요소 최적화

React 구성 요소의 수명주기 기능은 무엇입니까

React 구성 요소 간의 통신 예


위 내용은 React 컴포넌트 "외부"에서 상위 컴포넌트의 Prop을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.