Question

在React应用程序中，我在file1.js中编写了一个函数，并在file2.js中使用此函数

// file1.js
export const withPrefix = (Component) => (props) => (
  <PrefixContext.Consumer>
    {prefix => <Component {...props} prefix={prefix}/>}
  </PrefixContext.Consumer>
)

// file2.js
import { withPrefix } from '/path/to/file1.js'
let Toolbar = withPrefix(({prefix}) => ( // !error happens here
  <Fragment>
    <div style={{flexGrow: 1}}>
      <Button><Link to={`${prefix}/create`}>New Artifact</Link></Button>
    </div>
    <Search style={{width: 200}}/>
  </Fragment>
))

然后我收到错误＆＃34; TypeError：Object（...）不是函数＆＃34;。所以我更改了导出withPrefix功能

export function withPrefix(Component) {
  return (props) => (
    <PrefixContext.Consumer>
      {prefix => <Component {...props} prefix={prefix}/>}
    </PrefixContext.Consumer>
  )
}

错误消失了，一切正常。但我想知道为什么这两个出口的结果不同？另一个问题是如果我想在es6中导出箭头函数，第二个export function样式是唯一的方法吗？

附件1 （DefaultView.js）：

import React, {Component} from 'react'
import {Layout} from 'antd'

import Toolbar from './Toolbar'
import Content from './Content'

export const PrefixContext = React.createContext()

export function withPrefix(Component) {
  return (props) => (
    <PrefixContext.Consumer>
      {prefix => <Component {...props} prefix={prefix}/>}
    </PrefixContext.Consumer>
  )
}

export default class DefaultView extends Component {

  constructor(props) {
    super(props)
    this.state = {
      view: props.defaultView
    }
  }

  handleViewChange = (view) => {
    this.setState({view})
  }

  render() {
    const {prefix, views} = this.props
    const {view} = this.state
    return (
      <PrefixContext.Provider value={prefix}>
        <Layout>
          <Toolbar view={view} views={views} onViewChange= 
   {this.handleViewChange}/>
          <hr/>
          <Content view={view}/>
        </Layout>
      </PrefixContext.Provider>
    )
  }

}

附件2 （Summary.js）

import React, {Component, Fragment} from 'react'
import {Button, Input} from 'antd'
import {Link} from 'react-router-dom'

import ArtifactTable from './ArtifactTable'
import {withPrefix} from "./DefaultView"

const {Search} = Input

export const Toolbar = withPrefix(({prefix}) => (
  <Fragment>
    <div style={{flexGrow: 1}}>
      <Button><Link to={`${prefix}/create`}>新建软件包</Link></Button>
    </div>
    <Search style={{width: 200}}/>
  </Fragment>
))

class Summary extends Component {

  state = {
    data: []
  }

  componentDidMount() {
    const {prefix} = this.props
    console.log('prefix=' + prefix)
    fetch(prefix).then(json => {
      this.setState({data: json.content})
    })
  }

  render() {
    const {data} = this.state
    return (
      <div>
        <ArtifactTable data={data}/>
      </div>
    )
  }

}

export default withPrefix(Summary)

附件3 （Toolbar.js）

import React from 'react'
import {Switch, Route} from 'react-router-dom'

import {Toolbar as SummaryToolbar} from './Summary'
import Create from './Create'
import Details from './Details'
import Edit from './Edit'

import {withPrefix} from "./DefaultView"

const Toolbar = withPrefix(({prefix, view, onViewChange}) => (
  <div style={{background: '#fff', padding: 16, display: 'flex', 
alignItems: 'baseline'}}>
    <Switch>
      <Route exact path={`${prefix}`} component={SummaryToolbar}/>
      <Route exact path={`${prefix}/create`}
         component={() => <Create.Toolbar view={view} onViewChange= 
   {onViewChange}/>}/>
      <Route exact path={`${prefix}/:id`}
             component={() => <Details.Toolbar view={view} onViewChange= 
   {onViewChange}/>}/>
      <Route exact path={`${prefix}/:id/edit`}
             component={() => <Edit.Toolbar view={view} onViewChange= 
   {onViewChange}/>}/>
    </Switch>
  </div>
))

export default Toolbar

更新确实存在循环依赖问题，如@Bergi和@loganfsmyth所说。我搬出去之后 withPrefix导出代码段从Context.js转换为新文件DefaultView.js，问题已解决。但我还有一个问题。在循环依赖情况下，为什么export const f = () => () => {}与export function f() => { return () => {} }不同。是export const懒惰的评估是否比export function评估为@loganfsmyth？

导出命名箭头函数得到＆＃34;对象（...）不是函数＆＃34;错误

0 个答案: