Question

我有称为样式的模块。

export default (props = {}) => ({

  tile: {
    width: props.width,
    listStyle: "none"
  },
 banner: {
  color: 'red',
 }
})

如果我import styles from './styles.js;我基本上希望能够做到两件事：

获取这样的平铺样式：styles({width:}).tile

并获取这样的横幅样式：styles.banner，因此不要像styles().banner那样调用它。

怎么做？

编辑：我很抱歉，没有说清楚我的问题。对象已定义应始终具有以下结构：

tile: {
    width: props.width,
    listStyle: "none"
  },
 banner: {
  color: 'red',
 }

返回此对象的函数可以显示您想要的任何内容。

Answer 1

我不知道您为什么要这样做，但您可以执行以下操作。需要区分哪些样式可以在没有参数的情况下返回（“independentStyles”），以及那些需要输入值的样式：

const independentStyles = {
  banner: {
    color: 'red',
  },
};

const styles = (props = {}) => Object.assign({}, independentStyles, {
  tile: {
    width: props.width,
    listStyle: "none"
  },
});

// put the properties on the function object
Object.assign(styles, independentStyles);

console.log(styles({ width: 30 }).tile);   // { width: 30, listStyle: 'none' }
console.log(styles().tile);                // { width: undefined, listStyle: 'none' }
console.log(styles().banner);              // { color: 'red' }
console.log(styles.banner);                // { color: 'red' }
console.log(styles.tile);                  // undefined - can't be determined without props


// export default styles;

Answer 2

函数是一个对象，因此您还可以将其他属性附加到函数。请参阅以下代码段（在您的实际代码中，您将具有导出默认值）

＆＃13;

const styles = (props = {}) => ({
  tile: {
    width: props.width,
    listStyle: "none"
  },
});

styles.banner = {
  color: 'red',
};

// export default styles

// Test code:
console.log(styles.banner);
console.log(styles({width: 10}).tile);

＆＃13;

如何制作一个可选的调用函数？

2 个答案: