0

本指南中所述,我使用nwb构建了一个简单的 React 组件。

这是一个非常简单的组件,只是一个按钮:

import t from 'prop-types'
import React, {Component} from 'react'

class LoadingButton extends Component {
  static propTypes = {
    disabled: t.bool,
    loading: t.bool,
    type: t.string,
  }
  static defaultProps = {
    disabled: false,
    loading: false,
    type: 'button',
  }
  render() {
    let {children, disabled, loading, type, ...props} = this.props
    if (loading) {
      disabled = true
    }
    return <button disabled={disabled} type={type} {...props}>
      {children}
    </button>
  }
}

export default LoadingButton

在另一个项目中,使用 之后npm link,我可以导入这个组件,执行如下操作:

import LoadingButton from 'react-loading-button'

它有效!

在此处输入图像描述

但我的问题是,我还需要使用require(在旧代码库中)包含这个组件。我想做这样的事情:

var LoadingButton = require("react-loading-button");

不幸的是,这种方法对我不起作用。它给了我这个错误:

Error: Objects are not valid as a React child (found: [object Module]). If you meant to render a collection of children, use an array instead.

在此处输入图像描述

我已经使用 nwb 构建了该组件,其中指出:

默认情况下,nwb 将在 lib/ 中为您的项目创建一个 CommonJS 构建,这是通过 npm 安装时使用的主要方式,默认 package.json 主配置指向 lib/index.js。

require所以我对为什么不起作用感到有点困惑。

有没有人有过这种方法的经验?

4

1 回答 1

1

我尝试了函数/类样式组件,var LoadingButton = require("react-loading-button").default;似乎工作正常,代码库不完全相同,但值得一试。

于 2020-06-12T00:22:55.300 回答