[英]How do I include my custom Component using `require` instead of `include`
I have built a simple React Component using nwb as described in this guide . 如本指南中所述,我使用nwb构建了一个简单的 React 组件。
It's a very simple Component that is just a button:这是一个非常简单的组件,只是一个按钮:
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
In another project, after using npm link
, I am able to import this Component doing something like this:在另一个项目中,使用
npm link
后,我可以导入此组件,执行如下操作:
import LoadingButton from 'react-loading-button'
And it works!它有效!
But my question is, I also need to include this Component using require
(inside an older codebase).但我的问题是,我还需要使用
require
包含此组件(在较旧的代码库中)。 I would like to do something like this:我想做这样的事情:
var LoadingButton = require("react-loading-button");
Unfortunately, this approach doesn't work for me.不幸的是,这种方法对我不起作用。 It gives me this error:
它给了我这个错误:
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.
I have built the component using nwb, which states:我已经使用 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.
默认情况下,nwb 将在 lib/ 中为您的项目创建一个 CommonJS 构建,这是通过 npm 安装时使用的主要方式,默认 package.Z466DEEC76ECDF5FCA6D38571F6324D54 配置指向。
So I am a bit confused about why the require
doesn't work.所以我对为什么
require
不起作用有点困惑。
Has anyone had any experience with this approach?有没有人有过这种方法的经验?
I tried with function/class style components, var LoadingButton = require("react-loading-button").default;
我尝试使用函数/类样式组件
var LoadingButton = require("react-loading-button").default;
seems working fine, codebase is not exactly the same, but worth trying.似乎工作正常,代码库并不完全相同,但值得一试。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.