使用 redux 时导出 const functionName props undefined答案

【问题标题】：export const functionName props undefined when using redux使用 redux 时导出 const functionName props undefined
【发布时间】：2021-01-15 07:18:19
【问题描述】：

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

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';

我的实际代码确实有一个返回值，我只是为这篇文章截断了它。关于如何实现我想要实现的任何想法？

【问题讨论】：

标签： reactjs react-redux react-functional-component

【解决方案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';

【讨论】：