如何在React组件“外”使用父组件的Props？

ThreeWords 发布于2019-08-22 13:47 / 1881人阅读

摘要：默认主题在打包时挂在全局环境下供多个页面使用，定制主题需要在初始化的时候传入。项目下的基本组件大多是这样的定制主题是通过初始化传进来的，子组件可以通过或者拿到，但是却不能在外的里面直接使用。

在写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(
        
    )
}

定制主题是通过初始化SDK传进来的，子组件可以通过props或者context拿到，但是却不能在class外的styles里面直接使用。

那么如何实现在组件“外”使用父组件的Props呢？如果我们可以把需要使用的Props挂在“全局环境”下，那么不就可以随便使用了吗？

项目结构如下：

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

首先，在services中新建一个customTheme.js文件，内容如下：

let value = {}

export default () => {

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

  const getTheme = () => {
    return value
  }

  return {
    setTheme,
    getTheme,
  }
}

在index.js文件中我们可以拿到初始化SDK时传入的定制主题对象，这里我们把这个对象存储到customTheme.js里的value中：

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

哈哈，就是这么简单，分享给跟我一样的菜鸟们。?

原文链接：http://codesnote.com/react_pr...

GPU云服务器云服务器在php中使用组件 vuejs组件使用 asp使用第三方组件如何封装html组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92431.html

我学react之父子组件通信

摘要：父子组件通信父子间通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信兄弟组件通信父组件向子组件通信由于是单向数据流向的，父组件一般通过向子组件传递相关的一些信息来看一下下面这个例子，在这里我封装了一个组件，它的显示与取消的状态交 react父子组件通信 react父子间通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信兄弟组件通信父组件向子组件通信...

wwolf 2019-08-23 15:38 评论0 收藏0
React 中组件间通信的几种方式

摘要：在使用的过程中，不可避免的需要组件间进行消息传递通信，组件间通信大体有下面几种情况父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信父组件向子组件通信父组件通过向子组件传递，子组件得到后进行相应的处理。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨...

Anshiii 2019-07-01 10:49 评论0 收藏0
React 中组件间通信的几种方式

摘要：在使用的过程中，不可避免的需要组件间进行消息传递通信，组件间通信大体有下面几种情况父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信父组件向子组件通信父组件通过向子组件传递，子组件得到后进行相应的处理。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨...

brianway 2019-08-23 12:18 评论0 收藏0
React 深入系列3：Props 和 State

摘要：深入系列，深入讲解了中的重点概念特性和模式等，旨在帮助大家加深对的理解，以及在项目中更加灵活地使用。下篇预告深入系列组件的生命周期我的新书进阶之路已上市，请大家多多支持链接京东当当 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 的核心思想是组件化的思想，而React 组件的定...

hiyayiji 2019-08-22 17:28 评论0 收藏0
React 深入系列３：Props 和 State

摘要：当真正执行状态修改时，依赖的并不能保证是最新的，因为会把多次的修改合并成一次，这时，还是等于这几次修改发生前的。下篇预告深入系列组件的生命周期新书推荐进阶之路作者徐超毕业于浙江大学，硕士，资深前端工程师，长期就职于能源物联网公司远景智能。文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列3：Props 和 State React 深入系列，深...

endiat 2019-08-22 16:21 评论0 收藏0