在 const React/Typescript 中調用函數

Question

在我的應用程序中，我想有條件地渲染一些東西，所以我創建了一個函數getItem ，我想在我的自定義工具提示const CustomTooltip中調用它。

如何在return自定義工具提示的情況下調用該函數？ 目前，它在工具提示上呈現 getState("A")、getState("B")、getState("C")。 請參見下面的代碼：

  const numberStates = 3;
  function getState({payload}: TooltipProps<ValueType, NameType>, state: string ){
    if(payload){
      for(let i = 0; i < numberStates; i++){
        if(payload[i].dataKey == state){
          return <p>{ payload[i] } : { payload[i].value }</p>
        }
      }
    }
    return null;
  }


  const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => {
    if(active && payload && payload.length){
      return (
        <div className = "custom-tooltip">
          getState("A")
          getState("B")
          getState("C")
        </div>
      );
    }
    return null;
  }

Answer 1

您需要將調用getState括在括號中：

  const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => {
    if(active && payload && payload.length){
      return (
        <div className = "custom-tooltip">
          {getState("A")}
          {getState("B")}
          {getState("C")}
        </div>
      );
    }
    return null;

如果您嘗試使用 JSX 中的任何 javascript 功能，您應該期望使用此語法。

可以在此處找到有關 react 中的功能的更多信息。 您可以向下滾動到“示例：使用箭頭函數傳遞參數”部分，並查看如何在狀態上使用地圖時需要括號的示例。