Question

我有三个文件

Block.js 导入数据，并在下面显示es6 import。

/*
COMPONENTS IMPORTS.
*/
import BlockPill from '../../../components/block/pill.js'
import BlockNavigation from '../../../components/block/navigation.js'
import BlockFooter from '../../../components/block/footer.js'

/*
EXPORTS
*/
module.exports = { BlockNavigation, BlockFooter, BlockPill }

instance.js 如下所示导入block.js并使用扩展运算符导出。

/*
COMPONENT EXPORTING
*/
import Blocks from './core/registration/block.js' // custom: @blocks component imports.

/*
EXPORTS.
*/
module.exports = {
  // tags.
  ...Tags,

  // mods.
  ...Mods,

 // block.
 ...Blocks,

 // pages.
 ...Pages
}

welcome.js 导入实例，并按如下所示使用块。

/*
IMPORT START.
*/
import Instance from '../../../system/instance.js' // custom: application component's store.

let { BlockPill } = Instance || {}

// component.
<BlockPill />

结果：react-native会显示红色屏幕，并显示以下消息。如果我删除的代码比正常工作，否则将失败。

消息： 不变违反：元素类型无效，预计为字符串（对于内置组件）或类/函数（对于未定义的组件...... em>

Answer 1

BlockPill的导入无效。您将其设置为空对象，以防Instance.BlockPill虚假（let { BlockPill } = Instance || {}）时出现错误消息。

以common.js样式导出模块时，必须使用require进行导入。

// instance.js
const Blocks = require('./core/registration/block.js');
module.exports = {
    ...Blocks 
}

// welcome.js
const Blocks = require('../../../system/instance.js');
let { BlockPill } = Blocks; // Blocks is always defined, no need for default object.

Answer 2

您将es6导入与以前版本的导出混合使用，因此不确定，但是您应该尝试：

import * as Block from './core/registration/block.js' // instance.js

import * as Instance from '../../../system/instance.js' // welcome.js

并按照以下步骤导出组件：

// block.js
export BlockNavigation;
export BlockFooter;
export BlockPill;

用...失败的ReactNative导入

2 个答案: