时间戳

首页 > 解决方案 > 如何将 HTML 属性传递给 React 中的子组件？

javascript - 如何将 HTML 属性传递给 React 中的子组件？

问题描述

我有一个父组件和一个子组件，子组件有一个按钮，我想在第一次单击后禁用它。这个答案在子组件中对我有用。但是单击时执行的功能现在存在于父组件中，我如何将属性传递给子组件？我尝试了以下方法，但没有成功。

家长：

const Home = () => {
  let btnRef = useRef();
  const handleBtnClick = () => {
    if (btnRef.current) {
        btnRef.current.setAttribute("disabled", "disabled");
    }
  }
  
  return (
    <>
      <Card btnRef={btnRef} handleBtnClick={handleBtnClick} />
    </>
  )
}

孩子：

const Card = ({btnRef, handleBtnClick}) => {
  return (
    <div>
      <button ref={btnRef} onClick={handleBtnClick}>Click me</button>
    </div>
  )
}

标签： javascriptreactjs

解决方案

一般来说，在 React 中，refs 应该只作为最后的手段使用。React 本质上是声明性的，因此与其父母“让”孩子禁用（这是您对 ref 所做的），不如“说”孩子应该被禁用（下面的示例）：

const Home = () => {
  const [isButtonDisabled, setIsButtonDisabled] = useState(false)
  const handleButtonClick = () => {
    setIsButtonDisabled(true)
  }
  
  return (
    <>
      <Card isDisabled={isButtonDisabled} onButtonClick={handleButtonClick} />
    </>
  )
}


const Card = ({isDisabled, onButtonClick}) => {
  return (
    <div>
      <button disabled={isDisabled} onClick={onButtonClick}>Click me</button>
    </div>
  )
}

推荐阅读