BFE.devAI解答 - React 代码题
7. useToggle()

useToggle() is a custom React Hook that returns an array with two elements. The first element is a boolean value that represents whether the toggle is on or off, and the second element is a function that can be called to toggle the value of the boolean.

Here is an example implementation of useToggle():

import { useState } from 'react'function useToggle(initialValue: boolean = false): [boolean, () => void] {  const [value, setValue] = useState(initialValue)  const toggle = () => setValue(!value)  return [value, toggle]}

This implementation uses useState() to create a state variable to represent the boolean value. The toggle function simply negates the current value of the state variable using the ! operator.

With this implementation, the App component can use useToggle() as follows:

function App() {  const [on, toggle] = useToggle()  return (    <>      <span>{on ? 'ON' : 'OFF'}</span>      <button onClick={toggle}>Toggle</button>    </>  )}

In this example, the on variable is the boolean value returned by useToggle(), and the toggle function is the function returned by useToggle(). The component renders a span element that displays either "ON" or "OFF" based on the value of on, and a button element that calls toggle when clicked.