对象实例上的引用-React

Reference on object instance - React

本文关键字：引用 -React 实例 对象      更新时间：2023-09-26

我正在使用react来渲染传单地图。由于我无法从DOM中获取映射对象实例，因此如何从不同路由内的组件中检索实例？

App.js

const Main = React.createClass({
  componentDidMount: function() {
    map = L.map('map', {}).setView([45, 0], min_zoom);
    let layer = L.tileLayer('https://api....}', { }).addTo(map);
  },
  render() {
    return (
      <div id='map'>
        <div id='container'>
          {this.props.children}
        </div>
      </div>
    );
  }
});
import Travel from './routes/Travel';
render((
  <Router history={history}>
    <Route path="/" component={Main}>
      <Route path="/travel/:name" component={Travel}/>
    </Route>
  </Router>
), document.getElementById('app'));

路线/旅行.js

const Travel = React.createClass({
  componentDidMount: function() {
    GET THE MAP INSTANCE HERE // UNDEFINED
  },

  render() {
      return (
        <div id='storyBox'>
        </div>
      );
  });
  module.exports = Travel;

非常感谢

您可以将Main中的映射实例作为属性传递给子组件：

const Main = React.createClass({
  componentDidMount: function() {
    this.map = L.map('map', {}).setView([45, 0], min_zoom);
    let layer = L.tileLayer('https://api....}', { }).addTo(map);
  },
  render() {
    return (
      <div id='map'>
        <div id='container'>
          {React.cloneElement(this.props.children, {map: this.map})}
        </div>
      </div>
    );
  }
});

路线/旅行.js

const Travel = React.createClass({
  componentDidMount: function() {
    if (this.props.map) {
       // whatever
    }
  },
  render() {
      if (!this.props.map) return null;
      return (
        <div id='storyBox'>
        </div>
      );
  });
  module.exports = Travel;
相关文章：