使用 redux 时 export const functionName props undefined

Question

我正在尝试了解如何在导出像这样的功能组件时显示道具

export const functionName = ({...props}) => {
  console.log(props); // undefined
  return <p>Hello</p>
}

functionaName.propTypes = { // propTypes here }
const mapStateToProps = state => ({ // state stuff here })
const mapDispatchToProps = { // props mapping here }
export default connect(mapStateToProps, mapDispatchToProps)(functionName); // works like it should

正常方法正常工作

functionaName.propTypes = { // propTypes here }
const mapStateToProps = state => ({ // state stuff here })
const mapDispatchToProps = { // props mapping here }
export default connect(mapStateToProps, mapDispatchToProps)(functionName);

我正在尝试组织我的导入并具有这样的文件夹结构

components
  item // contains the component
    index.jsx
  index.js


  index.js
  export * from './item';

然后做一个导入就是这样

import { functionName } from '../components';

我的实际代码确实有一个 return 值，我只是将它截断为 post。关于如何实现我想要实现的目标有什么想法吗？

Answer 1

要使此代码生效：

import { functionName } from '../components';

你的 components/index.js 也需要像这样：

import { someFunction } from './item';
export someFunction;

// Or one liner:
export { someFunction } from './item';

以下是我的一个项目中的一些示例：

export { default as AutoSuggest } from './AutoSuggest/AutoSuggest.react';
export { ErrorLog } from './ErrorLog/ErrorLog.react';
export { default as IconsBar } from './IconsBar/IconsBar.react';
export { JobDetails, JobEntry, JobGraph } from './Job';
export { default as LogsViewer } from './LogsViewer/LogsViewer.react';
export { default as Menu } from './Menu/Menu.react';
export { default as MultiSelect } from './MultiSelect/MultiSelect.react';
export { default as Notifications } from './Notifications/Notifications.react';
export { default as Panel } from './Panel/Panel.react';
export { ColorProperty } from './Theme';

使用 redux 时 export const functionName props undefined

export const functionName props undefined when using redux

reactjs

react-redux

react-functional-component