Question

在此示例中，react-hyperscript是curry并公开了一组默认函数，因此h('div', props, children)变为div(props, children)。

import hyperscript from 'react-hyperscript';
import {curry} from 'lodash';

const isString = v => typeof v === 'string' && v.length > 0;
const isSelector = v => isString(v) && (v[0] === '.' || v[0] === '#');

const h = curry(
  (tagName, first, ...rest) =>
    isString(tagName) && isSelector(first) ?
      hyperscript(tagName + first, ...rest) :
      hyperscript(tagName, first, ...rest)
);

const TAG_NAMES = [
  'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', // ...
];

TAG_NAMES.forEach(tagName =>
  Object.defineProperty(h, tagName, {
    value: h(tagName),
    writable: false,
  })
);

export default h;

在另一个模块中：

import h, {div} from 'lib/h';

console.log(
  h,        // h
  div,      // undefined <- problem!
  h('div'), // div
  h.div     // div
)

这可以通过将此附加到示例（来自lodash的zip）来解决：

const {
  a, abbr, address, area, // ...
} = zip(
  TAG_NAMES,
  TAG_NAMES.map(h)
)

export {
  a, abbr, address, area, // ...
}

但是这个解决方案并不优雅，有人知道更好的选择吗？

Answer 1

如何动态命名出口

你做不到。 import和export语句是专门设计的，因为它们必须是静态可分析的，即在执行代码之前必须知道导入和导出名称。 p>

如果你需要动态的东西，那就做你正在做的事情：导出一个“地图”（或对象）。人们仍然可以使用解构来获得他们想要的东西：

const {div} = h;

es2015模块 - 如何动态命名导出

1 个答案: