指定参数

这是一个难题：如果我们想为这个函数指定参数怎么办？

例如，假设我们的函数名为 setTheme ，我们将使用它将用户的颜色主题从浅色模式更改为深色模式。

为了让这个工作，我们需要提供我们要切换到的主题名称，如下所示：

// Switch to light mode:
setTheme("light");
 
// Switch to dark mode:
setTheme("dark");

不过我们该怎么做呢？

如果我们将 setTheme 作为 onClick 的引用传递，就无法提供参数：

// 🚫 Invalid: calls the function without 'dark'
<button onClick={setTheme}>Toggle theme</button>

为了指定参数，我们需要将其包裹在括号中，但然后它会立即被调用：

// 🚫 Invalid: calls the function right away
<button onClick={setTheme("dark")}>Toggle theme</button>

我们可以通过一个包装函数来解决这个问题：

// ✅ Valid:
<button onClick={() => setTheme("dark")}>Toggle theme</button>

我们正在创建一个全新的匿名箭头函数， () => setTheme('dark') ，并将其传递给 React。当用户点击按钮时，该函数将运行，函数内部的代码会被执行（ setTheme('dark') ）。

如果你对箭头函数不太熟悉，一定要查看一下“箭头函数”入门课程👀。

如果仍然感到困惑，请不要担心：这种模式在 React 中非常常见，在本课程中你将有很多机会熟悉和适应它！