使用redux时，export const functionName道具未定义

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

我的实际代码确实有一个返回值，我只是在这篇文章中截断了它。关于如何实现我想要实现的目标，有什么想法吗？

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