訪問 react-typescript 中的變量

Question

我正在學習反應打字稿，

代碼 -

import {phones} from "../../get_phone";

interface IProps {
    phone: phones,
}

const Query1: React.FC <IProps> = ({phone}) => 
{
    console.log(phone)    
    const [model, setmodel] = useState(phone);
    console.log(model);
}

是否可以從其他組件以及其他 typescript 文件訪問model變量？

謝謝

Answer 1

您可以嘗試使用 自定義掛鈎：

useQuery.ts

const useQuery: React.FC<IProps> = ({ phone }) => {
  const [model, setModel] = useState(phone);
  return { model, setModel }
};

otherComponent.tsx

const OtherComponent: React.FC = () => {
  const { model, setModel } = useQuery({ phone });

  // can use `model` here
  return <div>something</div>;
};

Answer 2

model的值只能在反應的渲染周期內訪問。 如果你想將它傳遞給其他組件，那就是props的用途。 如果它是深度嵌套的組件，您可以為此使用Context Api 。

一般來說，如果沒有真正骯臟的黑客攻擊， models的值在 react 的渲染周期之外是無法訪問的。