如何从一个组件导入功能对另一个组件做出反应以呈现它？

Posted 2023-02-23

【中文标题】如何从一个组件导入功能对另一个组件做出反应以呈现它？

【英文标题】：how to import a function from one component react to another component to render it?

【发布时间】：2021-03-06 00:30:36

【问题描述】：

我正在使用钩子在 react 中进行我的第一次测试。 我创建了一个“地理”组件来在屏幕上显示坐标

import React,  useEffect, useState  from 'react';


function useCoordinates() 
    const [coordinates, setCoordinates] = useState(
        latitude: null,
        longitude: null
    );
    let geoId;

    useEffect(() => 
        geoId = window.navigator.geolocation.watchPosition(position => 
            setCoordinates(
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            );
        );
        return () => 
            navigator.geolocation.clearWatch(geoId);
        ;
    );

    return coordinates;


export default function coordinates() 
    const coordinates = useCoordinates();

    return coordinates.latitude == null ? (
        <div>Loading ...</div>
    ) : (
        <div>
            <h2>Latitude: coordinates.latitude</h2>
            <h2>Longitude: coordinates.longitude</h2>
        </div>
    )

现在我正在尝试将它导入到我的“应用”组件中来呈现它。 我已经导入了组件和函数，并在“app”组件的“render”中调用它，这就是我想要展示它的地方。

import React,  useState  from "react";
import "./App.css";
import  sum  from "./lib/math";
import geo,  coordinates  from './components/geo';

function App() 
  const [param1, setParam1] = useState(0);
  const [param2, setParam2] = useState(0);
  const [result, setResult] = useState(0);

  const handleSum = () => 
    setResult(sum(param1, param2));
    setParam1(0);
    setParam2(0);
  ;

  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <div>
        <input
          id="param1"
          type="number"
          value=param1
          onChange=(e) => setParam1(e.target.value)
        />

        <input
          id="param2"
          type="number"
          value=param2
          onChange=(e) => setParam2(e.target.value)
        />

        <button id="sum" onClick=handleSum>
          Sumar
        </button>

        <p id="result">result</p>
      </div>
      <div>
        Count is: count
        <button onClick=() => setCount(count + 1)>Increase</button>
      </div>
      <coordinates />
    </div>
  );


export default App;

控制台返回以下错误 'React Hook "useCoordinates" 在函数 "coordinates" 中调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数。'

我做错了什么？我应该如何导入它？

【参考方案1】：

import 语句不正确，你也没有导出 customHook。

export function useCoordinates()  // maybe export this if you want to use this else where
    const [coordinates, setCoordinates] = useState(
        latitude: null,
        longitude: null
    );
    let geoId;

    useEffect(() => 
        geoId = window.navigator.geolocation.watchPosition(position => 
            setCoordinates(
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            );
        );
        return () => 
            navigator.geolocation.clearWatch(geoId);
        ;
    );

    return coordinates;


export default function Coordinates()  // Pascal case is best for components
    const coordinates = useCoordinates();

    return coordinates.latitude == null ? (
        <div>Loading ...</div>
    ) : (
        <div>
            <h2>Latitude: coordinates.latitude</h2>
            <h2>Longitude: coordinates.longitude</h2>
        </div>
    )

假设您只想导入组件，导入应该是这样的：

import Coordinates from './components/geo';

把它当作

<Coordinates/>

【讨论】：

非常感谢！我以为我不需要导出整个组件。

如果您不想在其他任何地方使用自定义挂钩导出，则不需要。关于组件，您已经正确导出它，但导入错误。