如何从挂钩状态传递到React的App挂钩中显示？

Question

如何将info的状态（数据）发送到App挂钩，以便可以在div中显示属性？ setInfo(info)存储要在Map挂钩上显示的数据，当我在console.log(info)中单击_onClick时，可以看到所有属性。我对如何使用和在App中显示它感到困惑。感谢您的帮助。

App

const App = () => {

  const displayInfo = () => {
    // this is where I would hope to return the <div>'s with data such as <div>info.Company</div>
  }

  return (
    <div className="App">
      <div className="inner-left map-container">
        <Map />
      </div>
      <div className="inner-right info-container">
        <Nav />
        <Search />
        <div id="info_side">
          {displayInfo}
        </div>
      </div>
    </div>
  );
}

export default App;

地图

const Map = () => {
    ...
    const [info, setInfo] = useState(null)

    ...

    const _onClick = event => {
        const { features } = event;
        const info = features && features.find(f => f.layer.id === 'icon');
        setInfo(info); // This is what I would like to use in App
    }

    return (
        <ReactMapGL
            {...viewport}
            onViewportChange={_updateViewport}
            width="100%"
            height="100%"
            mapStyle={mapStyle}
            mapboxApiAccessToken={TOKEN}
            onHover={_onHover}
            onClick={_onClick}>

            <Source id="my-data" type="geojson" data={geojson}>
                <Layer {...icon} />
            </Source>

            <div style={navStyle}>
                <NavigationControl onViewportChange={_updateViewport} />
                ...
            </div>
        </ReactMapGL>
    );
}

export default Map;

Answer 1

您可以将回调属性传递给孩子。

App

const App = () => {

  const [info, setInfo] = useState(); // local info state

  const displayInfo = () => {
    // this is where I would hope to return the <div>'s with data such as <div>info.Company</div>
    // access current copy of info
  }

  return (
    <div className="App">
      <div className="inner-left map-container">
        <Map onInfoChange={setInfo} /> // pass info state setter to child
      </div>
      <div className="inner-right info-container">
        <Nav />
        <Search />
        <div id="info_side">
          {displayInfo}
        </div>
      </div>
    </div>
  );
}

export default App;

地图

const Map = ({
  onInfoChange, // passed callback prop
}) => {
    ...
    const [info, setInfo] = useState(null)

    // use an effect hook to call callback whenever info updates
    useEffect(() => {
      onInfoChange(info); // pass info back to parent
    }, [info]);

    const _onClick = event => {
        const { features } = event;
        const info = features && features.find(f => f.layer.id === 'icon');
        setInfo(info); // This is what I would like to use in App
    }

    return (
        <ReactMapGL
            {...viewport}
            onViewportChange={_updateViewport}
            width="100%"
            height="100%"
            mapStyle={mapStyle}
            mapboxApiAccessToken={TOKEN}
            onHover={_onHover}
            onClick={_onClick}>

            <Source id="my-data" type="geojson" data={geojson}>
                <Layer {...icon} />
            </Source>

            <div style={navStyle}>
                <NavigationControl onViewportChange={_updateViewport} />
                ...
            </div>
        </ReactMapGL>
    );
}

export default Map;

[我现在要指出的是，您现在已经将重复状态存储在两个组件中，因此最好将信息状态和逻辑提升到最接近的公共祖先（App），然后将信息作为道具传递给该组件，需要它（地图）。 单一真相原理。或者像其他人指出的那样，切换到全局状态管理系统（例如redux），或者使用React Context（即react-redux在幕后使用的东西）自行滚动。