在 Reactjs 中導出默認值

Question

如何命名導出的 function？ deafult給我一個錯誤

export default() => {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

useEffect(() => {
setTimeout(() => {
  setWidth(window.innerWidth);
  setHeight(window.innerHeight);
}, 100);
});

return (
<Layout title="Success!">
  <Container>
    <Confetti width={width} height={height} numberOfPieces={450} />
    <Title>congrats!</Title>
    <Message>Stripe has successfully processed your payment.</Message>
  </Container>
</Layout>
);
}

我想將我的 function 命名為默認值，但它給了我一個錯誤，這可能嗎？

Answer 1

嘗試這個

const MyFunction = () => {
const [width, setWidth] = useState(0);
const [height, setHeight] = useState(0);

useEffect(() => {
setTimeout(() => {
  setWidth(window.innerWidth);
  setHeight(window.innerHeight);
}, 100);
});

return (
<Layout title="Success!">
  <Container>
    <Confetti width={width} height={height} numberOfPieces={450} />
    <Title>congrats!</Title>
    <Message>Stripe has successfully processed your payment.</Message>
  </Container>
</Layout>
);
}

export default MyFunction

Answer 2

有兩種方法可以創建導出。

您可以使用function一次完成所有操作。

export default function App() {
  return <div />
}

或者您可以使用箭頭 function 並分兩部分進行。

const App = () => {
  return <div />
}
export default App;

您使用哪一個主要取決於偏好。 JavaScript 用戶通常更喜歡第一個，TypeScript 用戶通常喜歡第二個。