reactjs - Reactjs 自定义钩子生成 jsx 并控制事件

Question

我正在使用 React 钩子来生成可重用的 ui 和事件处理。这样做好吗？

import React, { useRef, useState } from "react";

const CustomButton = () => {
  const [text, setText] = useState("hello");
  const lower = useRef(false);

  const onClick = () => {
    const newText = lower.current ? text.toUpperCase() : text.toLowerCase();
    lower.current = !lower.current;
    setText(newText);
  };

  const add = () => {
    return <button onClick={onClick}>{text}</button>;
  };

  return { add };
};

export default CustomButton;

标签： reactjsreact-hooks

Answer 1

const { useRef, useState } = React;

const CustomButton = () => {
  const [text, setText] = useState("hello");
  const [isLowercase, setIsLowercase] = useState(false);
  // const lower = useRef(false);

  const onClick = () => {
    // const newText = lower.current ? text.toUpperCase() : text.toLowerCase();
    // lower.current = !lower.current;
    const newText = isLowercase ? text.toUpperCase() : text.toLowerCase();
    setIsLowercase((prev)=>!prev);
    setText(newText);
  };

  const add = () => {
    return <button onClick={onClick}>{text}</button>;
  };
  // return { add }
  return add();
};


const App = () => (<CustomButton />)
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

ref如果您只想使用它来更改字母，我认为您不需要。