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

Question

我有一个父组件和一个子组件，子组件有一个按钮，我想在第一次单击后禁用它。这个答案在子组件中对我有用。但是点击时执行的函数现在存在于父组件中，我如何将属性传递给子组件？我尝试了以下但没有用。家长：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>  )}

Answer 1

一般来说，refs 应该只作为 React 中的最后手段使用。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>

  )

}

Answer 2

实际上，如果您修复Card组件中的拼写错误，它就会起作用。只需重命名hadnlBtnClick为handleBtnClick




Answer 3

您不需要按名称提及每个道具/属性，因为您可以Object Destructuring在此处使用 javascript。

const Home = () => {

  const [isButtonDisabled, setIsButtonDisabled] = useState(false)

  const handleButtonClick = () => {

    setIsButtonDisabled(true)

  }

  

  return (

    <>

      <Card isDisabled={isButtonDisabled} onButtonClick={handleButtonClick} />

    </>

  )

}

const Card = (props) => {

  return (

    <div>

      <button {...props}>Click me</button>

    </div>

  )

}

您还可以选择一些道具，并在子组件中以不同的方式使用它们。例如，请参见text下面的道具。

const Home = () => {

  const [isButtonDisabled, setIsButtonDisabled] = useState(false)

  const handleButtonClick = () => {

    setIsButtonDisabled(true)

  }

  

  return (

    <>

      <Card text="I'm a Card" isDisabled={isButtonDisabled} onButtonClick={handleButtonClick} />

    </>

  )

}

const Card = ({text, ...restProps}) => {

  return (

    <div>

      <button {...restProps}>{text}</button>

    </div>

  )

}