在功能組件中訪問單獨的 function 中的道具

Question

我有一個簡單的父功能組件（App.js）和一個子功能組件（counters.jsx），我想將信號/道具從子傳遞給父。 我想將道具作為參數發送給我的子組件中的另一個 function。 我可以通過onClick={props.parentCallback}輕松觸發父 function 。 但是，如果我將相同的道具作為參數發送給子組件中的另一個 function，我會收到錯誤“預期分配或 function 調用，而是看到一個表達式 no-unused-expressions”

//This is parent Component, App.js
    function App() {
      return (
        <div className="App"> 
          <Counters parentCallback = {handleCallback}/>      
        </div>
      );
    }

const handleCallback = () => {
  console.log("CALLED FRM CHILD");
}

 //This is Child Component- Counters.jsx   
      
    function Counters (props) {
      return (
        <div>
          <button onClick={ ()=> parentHandler(props) }>CALL PARENT</button><hr/>
          {//onClick={props.parentCallback} - This works well}
        </div>
      );
    };
function parentHandler (props) {
      props.parentCallback; // This line throws the aforementioned error 
      }  

Answer 1

no-unused-expressions通常意味着您評估了一個值但從未使用過。 此規則旨在消除未使用的表達式。 例如if(true) 0

在您的情況下，您正在調用不帶括號的props.parentCallback ，而未使用。 您可以在 function 調用后添加括號，如props.parentCallback()或在最后返回一些值。 這樣你的 eslint 錯誤就會消失。

還有onClick={props.parentCallback} - 這很好用，因為您只是將 function 的引用傳遞給父組件。 但是在這里onClick={ ()=> parentHandler(props) }您正在每個渲染上創建一個新的內聯 function 。

Answer 2

您只是在引用 function。 不叫它。 您可以將 parentHandler function 修改為

function parentHandler (props) {
  props.parentCallback()
  } 

Answer 3

謝謝你們的回答，但沒有一個答案正是我想要的。 最后，我自己得到了答案：

您現在需要運行 function 嗎？

然后添加（）執行它

是否需要 function 被引用以便稍后調用？

不要添加 ()。

更多示例：

onClick=parentCallback() 表示盡快調用“parentCallback()，並將其返回值設置為 onClick”。

另一方面，onClick=parentCallback 表示“onClick 是 parentCallback 的別名。如果調用 onClick()，得到的結果與調用 parentCallback() 相同”

我通過谷歌搜索“函數調用和 function 參考”找到了它。