在 Reactjs 中导出默认值

Question

How am I able to name an exported function? deafult gives me an error

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

I would like to name my function default but it gives me an error, is this possible?

Answer 1

Try this

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

There are two ways to create an export.

You can do it all at once with a function .

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

Or you can use an arrow function and do it in two parts.

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

Which one you use is mostly up to preference. JavaScript users typically prefer the first and TypeScript users the second.