访问react-typescript中的变量

Question

我在学react-typescript

代码-

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

您可以尝试使用Custom Hooks

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的值只能在react的呈现周期内访问。如果你想把它传递给其他组件，这就是props的作用。如果它是深度嵌套的组件，你可以使用Context Api。

通常，如果没有真正肮脏的黑客攻击，models的值在react的呈现周期之外是不可访问的。