React - Làm cách nào để xuất thành phần không có trạng thái tinh khiết

Question

Làm cách nào để xuất một thành phần không thuần túy không trạng thái?

Nếu tôi sử dụng lớp này làm việc:

import React, { Component } from 'react'; 

export default class Header extends Component { 
    render(){ 
     return <pre>Header</pre> 
    } 
} 

Tuy nhiên nếu tôi sử dụng một chức năng tinh khiết Tôi không thể có được nó để làm việc.

import React, { Component } from 'react'; 
export default const Header =() => { 
    return <pre>Header</pre> 
} 

Tôi có thiếu cái gì cơ bản không?

Answer 1

ES6 không cho phép export default const. Bạn phải khai báo hằng số đầu tiên sau đó xuất khẩu:

const Header =() => { 
    return <pre>Header</pre> 
}; 
export default Header; 

chế này tồn tại để tránh writting export default a, b, c; mà bị cấm: chỉ có một biến có thể được xuất ra dưới dạng mặc định

Answer 2

Bạn cũng có thể sử dụng một lớp mà kéo dài PureComponent thay của Component. Xem tại đây: https://facebook.github.io/react/docs/react-api.html#react.purecomponent

Answer 3

Cũng giống như ghi chú bên. Bạn có thể về mặt kỹ thuật export default mà không khai báo biến trước tiên.

export default() => (
    <pre>Header</pre> 
) 

Answer 4

bạn có thể làm điều đó trong hai cách

1)

// @flow 
 

 
type CompletedComponentProps = { 
 
    header: string 
 
}; 
 

 
const ComponentA = (props: ComponentAProps) => { 
 
    return <div>{props.header}</div>; 
 
}; 
 

 
export default ComponentA;

2)

// @flow 
 

 
type CompletedComponentProps = { 
 
    header: string 
 
}; 
 

 
export const ComponentA = (props: ComponentAProps) => { 
 
    return <div>{props.header}</div>; 
 
};

nếu chúng tôi sử dụng mặc định chúng tôi nhập khẩu như

này

import ComponentA from '../shared/componentA' 

nếu chúng ta không sử dụng mặc định chúng tôi nhập khẩu như

này

import { ComponentA } from '../shared/componentA'