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

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

상태 비저장 완전 바보 컴포넌트를 내보내려면 어떻게 해야 하나요?

클래스를 사용하면 다음과 같이 동작합니다.

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;이는 금지되어 있습니다.기본값으로 내보낼 수 있는 변수는 1개뿐입니다.

부차적인 메모로요.엄밀히 말하면export default변수를 먼저 선언하지 않습니다.

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

두 가지 방법으로 할 수 있다

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'

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

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

이 예에서는 이미 곱슬 괄호를 사용하고 있습니다.return이것은 타협 없이 당신의 요구에 맞는 것 같습니다.

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