如何使用 `require` 而不是 `include` 包含我的自定义组件

Question

构建了一个简单的 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 构建了组件，其中指出：

By default, nwb will create a CommonJS build for your project in lib/, which is the primary way it will be used when installed via npm, with default package.json main config pointing to lib/index.js.

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

有没有人对这种方法有任何经验？

Answer 1

我尝试使用 function/class 风格的组件，var LoadingButton = require("react-loading-button").default; 似乎工作正常，代码库不完全相同，但值得一试。

如何使用 `require` 而不是 `include` 包含我的自定义组件

How do I include my custom Component using `require` instead of `include`

javascript

components

build

reactjs

nwb