Question

我已经在react包（react-datepicker）周围创建了包装器，以便在团队中的各个产品之间具有紧密的日期选择器。我已经编写了包装程序，可以在其中传递要渲染的自定义输入组件。我已经对其进行了测试，并且可以在Storybook中使用。

我现在正在尝试将此包装绑定到Rails应用程序中。我有一个可构建可插入Rails应用程序的组件的仓库（适用于其他组件）。

尝试渲染组件时，出现以下错误：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at index.js:8.
    in DatePicker (at renderComponent.js:5)

我已经对SO进行了搜索，并给出了似乎答案，原因是我很可能已经在没有{}的情况下进行了命名出口的导入，或者在{{ 1}}。

我已经三遍检查了我的代码，无法找到可能发生的地方。

以下是我的包装程序代码。

FVDatePicker.js

{}

相应的样式FVDatePickerStyles.js 使用react-emotion

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import DatePicker from 'react-datepicker'
import 'react-datepicker/dist/react-datepicker.css'
import FVPicker from './FVDatePickerStyles'

class FVDatePicker extends Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedDate: ''
    }
  }

  componentDidMount() {
    this.setState({ selectedDate: this.props.date || new Date() })
  }

  changeDateValue = selectedDate => {
    this.setState({ selectedDate })
  }

  render() {
    // This check and subsequent throw is because PropTypes
    // doesn't stop the execution of the component
    if (!this.props.customInput) {
      throw "'customInput' prop is required"
    }

    return (
      <FVPicker className="FVDatePicker">
        <DatePicker
          customInput={this.props.customInput}
          selected={this.state.selectedDate}
          onChange={date => this.changeDateValue(date)}
          dateFormat={this.props.dateFormat || 'MM/dd/yyyy'}
        />
      </FVPicker>
    )
  }
}

FVDatePicker.propTypes = {
  customInput: PropTypes.node.isRequired
}

export default FVDatePicker

然后将以上代码汇总到import styled from 'react-emotion' import DT from 'design-tokens/src/design-tokens' const FVPicker = styled.div/* css */ ` display: inline-block; // Other styles but leaving out for the sake of brevity ` export default FVPicker

在我的可渲染应用程序中，下面是代码。

componentName / index.js

dist/index.js

import React from 'react' import FVDatePicker from 'fv-datepicker' import renderComponent from '../../utils/renderComponent' import CustomDatePickerInput from './CustomDatePickerInput' const DatePicker = () => { return ( <FVDatePicker date="" inputName="start-time" dateFormat="yyyy/MM/dd" customInput={<CustomDatePickerInput />} /> ) } window.DatePicker = renderComponent(DatePicker) export default DatePicker来自{_1}}中的node_modules

这是上面文件中引用的renderComponent：

FVDatePicker

预期结果应该是我的组件应该在rails应用程序中呈现，但是抛出上面列出的错误（我将在此处再次添加）：

package.json

我在进出口方面缺少什么吗？还是做错了其他事情？

Answer 1

FVDatePicker 是默认导入还是命名导入？尝试

import { FVDatePicker } from 'fv-datepicker'

这类反应错误通常在导入错误时发生，并且很容易忽略...

无法跟踪可能的导入/导出错误-React / ES6模块

1 个答案: