首頁猿問如何將 HTML 屬性傳遞給...

如何將 HTML 屬性傳遞給 React 中的子組件？

JavaScript

陪伴而非守候 2023-03-10 15:23:57

我有一個父組件和一個子組件，子組件有一個按鈕，我想在第一次單擊后禁用它。這個答案在子組件中對我有用。但是點擊時執行的函數現在存在于父組件中，我如何將屬性傳遞給子組件？我嘗試了以下但沒有用。家長：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> )}

查看完整描述

3 回答

小怪獸愛吃肉

TA貢獻1852條經驗獲得超1個贊

一般來說，refs 應該只作為 React 中的最后手段使用。React 本質上是聲明式的，所以與其讓父級“讓”子級禁用（這就是你對 ref 所做的），不如說它應該“說”子級應該被禁用（如下例）：

const Home = () => {

const [isButtonDisabled, setIsButtonDisabled] = useState(false)

const handleButtonClick = () => {

setIsButtonDisabled(true)

}

return (

</>

)

}

const Card = ({isDisabled, onButtonClick}) => {

return (

<div>

<button disabled={isDisabled} onClick={onButtonClick}>Click me</button>

</div>

)

}

反對回復 2023-03-10

臨摹微笑

TA貢獻1982條經驗獲得超2個贊

實際上，如果您修復Card組件中的拼寫錯誤，它就會起作用。只需重命名hadnlBtnClick為handleBtnClick

反對回復 2023-03-10

慕神8447489

TA貢獻1780條經驗獲得超1個贊

您不需要按名稱提及每個道具/屬性，因為您可以Object Destructuring在此處使用 javascript。

const Home = () => {

const [isButtonDisabled, setIsButtonDisabled] = useState(false)

const handleButtonClick = () => {

setIsButtonDisabled(true)

}

return (

</>

)

}

const Card = (props) => {

return (

<div>

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

</div>

)

}

您還可以選擇一些道具，并在子組件中以不同的方式使用它們。例如，請參見text下面的道具。

const Home = () => {

const [isButtonDisabled, setIsButtonDisabled] = useState(false)

const handleButtonClick = () => {

setIsButtonDisabled(true)

}

return (

</>

)

}

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

return (

<div>

</div>

)

}

反對回復 2023-03-10

3 回答
0 關注
167 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將 HTML 屬性傳遞給 React 中的子組件？

如何將 HTML 屬性傳遞給 React 中的子組件？

3 回答

添加回答

如何將 HTML 屬性傳遞給 React 中的子組件？