在我的代码顶部使用“使用客户端”的原因是什么？

Question

与React一起工作。在我的按钮上传递OnClick方法时，请遇到错误。解决方案是在我的代码顶部使用“使用客户端”。这样做的原因是什么？

function MyButton() {

  function handleClick() {
    alert('You clicked the button.')
  }
  return (
    <button className="bg-sky-500 mt-2 rounded-md p-2" onClick={handleClick}>Click Me!</button>
  );
}

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

export default function Home() {

  const pList = products.map(element => <li key={element.id}>{element.title}</li>);

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-cyan-300">
      <div className="flex flex-col items-start">
        <h1>This is a React Demo. Click the button.</h1>
        <MyButton />
        <ul>{pList}</ul>
      </div>
    </div>
  );
}

Answer 1

onClick

处理程序），这使得这是不可能的。因此，您必须使您的组件成为“客户端”，即在浏览器上渲染的一个。

但是所有这些都是基本的next。渲染