React-순수한 상태 비 저장 구성 요소를 내보내는 방법

React-순수한 상태 비 저장 구성 요소를 내보내는 방법

---

stateless pure dumb 컴포넌트를 내보내려면 어떻게해야합니까?

수업을 사용하면 작동합니다.

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>
}

나는 기본적인 것을 놓치고 있습니까?

---

ES6는 export default const. 먼저 상수를 선언 한 다음 내 보내야합니다.

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

이 제약 조건 export default a, b, c;은 금지 된 쓰기 를 피하기 위해 존재합니다 . 하나의 변수 만 기본값으로 내보낼 수 있습니다.

---

참고로. export default변수를 먼저 선언하지 않고도 기술적으로 할 수 있습니다.

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

---

할당 대신 함수 선언을 사용할 수도 있습니다.

export default function Header() {
    return <pre>Header</pre>
}

귀하의 예에서는 이미 중괄호를 사용하고 return있으므로 타협없이 귀하의 요구 사항과 분명히 일치합니다.

---

두 가지 방법으로 할 수 있습니다

1)

// @flow

type ComponentAProps = {
  header: string
};

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

export default ComponentA;

2)

// @flow

type ComponentAProps = {
  header: string
};

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

사용하면 다음 default과 같이 가져옵니다.

import ComponentA from '../shared/componentA'

if we don't use default we import like this

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

참고URL : https://stackoverflow.com/questions/41695189/react-how-to-export-a-pure-stateless-component