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&lt;MyComponentProps&gt; = () =&gt; @Trevor,真正的问题,我仍在使用 TS 迈出第一步:为什么不直接使用 export default function MyComponent(props: MyComponentProps) 而不是使用 const MyComponent: React.FC&lt;MyComponentProps&gt; = () =&gt; @gmagno,如果你看一下 FC/FunctionComponent 的定义,你会发现它为你做了更多的事情:1)ReactElement | null 的返回类型,2)添加@ 987654328@ 添加到属性中,3) 将其他成员添加到 FC,例如 propTypesdefaultProps

以上是关于React - 如何导出纯无状态组件的主要内容,如果未能解决你的问题,请参考以下文章

如果没有 shouldComponentUpdate,React 0.14 的无状态组件将如何提供性能改进?

React Navigation 如何将 props 传递给 TabNavigator 无状态功能组件

如何在 React Native 的无状态功能组件中扩展原生组件的 props TypeScript 接口?

[react] 描述下在react中无状态组件和有状态组件的区别是什么?

React 组件从有状态到无状态(区别)

如何在带有 TypeScript 的 React-Native 中使用 styled-component 键入无状态功能组件?