이 글은 주로 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='styles.app'></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 './services/customTheme' ... const setTheme = (customTheme() || {}).setTheme setTheme && setTheme(customTheme) ...
이런 방식으로 다른 곳에서 customTheme의 값을 직접 가져올 수 있습니다
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='styles.app'></p> ) }
관련 권장 사항:
위 내용은 React 컴포넌트 "외부"에서 상위 컴포넌트의 Prop을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!