0

假设我们有 2 个不同的函数（或更多），它们接受来自某个执行程序的一个参数并返回结果对象。让我举个例子：

const style_1 = theme => ({
  header : {
      color : theme.primary
    }
})

const style_2 = theme => ({
  header : {
      backgroundColor : theme.secondary,
      color : "red"
    }
})

我想执行它们并将结果对象合并为一个！在对象的情况下，这是一项微不足道的任务，例如。

const style_1 = {
  header : {
      color : theme.primary
    }
}

const style_2 = {
  header : {
      backgroundColor : theme.secondary,
      color : "red"
    }
}

 const res = {...style_1, ...style_2}

预期的结果是

 { 
   header :
     { 
       backgroundColor : "black",
       color : "red"
      }
}

但是在功能的情况下，它变得有点烦人。

所以问题是。是否有可能实现我想要的？（通过 Lodash 或使用其他东西）

我决定我可能会创造类似的东西

const style_1 = theme => ({
    header : {
        color : theme.secondary
        backgroundColor : "black"
    },
    footer : {
        color : "purple"
    }
})

const style_2 = (theme, extendStyles) => {
    const extendStyles = extendStyles(theme);

    return {
        header : {
            color : theme.primary,
            ...extendsStyles.header
        },
        ...extendStyles
    }
}

但是这个解决方案有点丑陋，因为我应该以可能被覆盖的每一种风格来照顾这个东西。也许存在一些实用程序/助手可以帮助以更好的方式处理它？

PS 不要问我这个有趣的要求，它只是 MaterilUI 的withStyle功能，我想知道如何正确处理它。

谢谢你的帮助。

4

1 回答 1

0

您可以使用_.invokeMap()和_.merge()从一组样式函数和一个主题生成一个组合样式对象：

const applyTheme = (styles, theme) =>
  _.merge(..._.invokeMap(styles, _.call, null, theme));

const style_1 = theme => ({
  header : {
      color : theme.primary,
      border: `1px solid ${theme.primary}`
    }
})

const style_2 = theme => ({
  header : {
      backgroundColor : theme.secondary,
      color : "red"
    }
})

const theme = { primary: 'red', secondary: 'blue' }

const result = applyTheme([style_1, style_2], theme)

console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

于 2018-12-16T20:21:31.417 回答