React - 如何导出纯无状态组件
Posted
技术标签:
【中文标题】React - 如何导出纯无状态组件【英文标题】:React - How to export a pure stateless component 【发布时间】:2017-06-01 09:37:52 【问题描述】:如何导出无状态的纯哑组件?
如果我使用类,这可行:
import React, Component from 'react';
export default class Header extends Component
render()
return <pre>Header</pre>
但是,如果我使用纯函数,我无法让它工作。
import React, Component from 'react';
export default const Header = () =>
return <pre>Header</pre>
我错过了一些基本的东西吗?
【问题讨论】:
【参考方案1】:ES6 不允许export default const
。您必须先声明该常量,然后再将其导出:
const Header = () =>
return <pre>Header</pre>
;
export default Header;
此约束的存在是为了避免写入被禁止的export default a, b, c;
:默认只能导出一个变量
【讨论】:
【参考方案2】:作为旁注。从技术上讲,您可以在不先声明变量的情况下 export default
。
export default () => (
<pre>Header</pre>
)
【讨论】:
唯一的缺点是以这种方式导出的组件将在 chrome 的 React 开发工具中显示为Unknown
。
如何导入这样声明的函数?
@DanielThompson 您可以像这样导入它:import YourComponent from './path/to/component'
将路径替换为组件的实际路径。默认导出的导入名称可以是您喜欢的任何名称,在此示例中我选择了YourComponent
。【参考方案3】:
你可以通过两种方式做到这一点
const ComponentA = props =>
return <div>props.header</div>;
;
export default ComponentA;
2)
export const ComponentA = props =>
return <div>props.header</div>;
;
如果我们使用default
导出然后我们像这样导入
import ComponentA from '../shared/componentA'
如果我们不使用default
导出然后我们像这样导入
import ComponentA from '../shared/componentA'
【讨论】:
【参考方案4】:你也可以使用函数声明来代替赋值:
export default function Header()
return <pre>Header</pre>
在您的示例中,您已经使用了大括号和return
,因此这显然符合您的需求,毫不妥协。
【讨论】:
在 Typescript 之前,这是我的首选方法。对于 TS,(不幸的是)返回到const
箭头函数方法来声明属性类型很有用:const MyComponent: React.FC<MyComponentProps> = () =>
。
@Trevor,真正的问题,我仍在使用 TS 迈出第一步:为什么不直接使用 export default function MyComponent(props: MyComponentProps)
而不是使用 const MyComponent: React.FC<MyComponentProps> = () =>
?
@gmagno,如果你看一下 FC/FunctionComponent 的定义,你会发现它为你做了更多的事情:1)ReactElement | null
的返回类型,2)添加@ 987654328@ 添加到属性中,3) 将其他成员添加到 FC,例如 propTypes
和 defaultProps
。以上是关于React - 如何导出纯无状态组件的主要内容,如果未能解决你的问题,请参考以下文章
如果没有 shouldComponentUpdate,React 0.14 的无状态组件将如何提供性能改进?
React Navigation 如何将 props 传递给 TabNavigator 无状态功能组件
如何在 React Native 的无状态功能组件中扩展原生组件的 props TypeScript 接口?
[react] 描述下在react中无状态组件和有状态组件的区别是什么?
如何在带有 TypeScript 的 React-Native 中使用 styled-component 键入无状态功能组件?