React: How To Read From The Dom After Mount?

In my React component, I need to read data from the DOM when it's available for later parts of my application to work. I need to persist the data into state, as well as send it thr

Solution 1:

Here is the pattern I use in reflux.

exportdefaultclassAppCtrlextendsAppCtrlRender {
  constructor() {
    super();
    this.state = getAllState();
  }

  componentDidMount = () => {
    // console.log('AppCtrl componentDidMount');this.unsubscribeApp = AppStore.listen(this.appStoreDidChange);
    this.unsubscribeGS = GenusSpeciesStore.listen(this.gsStoreDidChange);
    Actions.setWindowDefaults(window);
  }
  componentWillUnmount = () => { this.unsubscribeApp(); this.unsubscribeGS(); }
  appStoreDidChange = () => { this.setState(getAppState()); }
  gsStoreDidChange = () => { this.setState(getGsState()); }
  shouldComponentUpdate = (nextProps, nextState) => {
    return nextState.appStoreChanged && nextState.gsStoreChanged;
  }
}

In app.store.js

function_windowDefaults(window) {
  setHoverValues();
  let deviceTyped = 'mobile';
  let navPlatform = window.navigator.platform;
  switch (navPlatform) {
    case'MacIntel':
    case'Linux x86_64':
    case'Win32': deviceTyped = 'desktop'; break;
  }
  //deviceTyped = 'mobile';
  _appState.deviceType = deviceTyped;
  _appState.smallMobile = (deviceTyped == 'mobile' && window.screen.width < 541);
  //_appState.smallMobile = (deviceTyped == 'mobile');if (deviceTyped == 'desktop') {
    let theHeight = Math.floor(((window.innerHeight - 95) * .67));
    // console.log('_windowDefaults theHeight: ', theHeight);
    _appState.commentMaxWidth = theHeight;
    _appState.is4k = (window.screen.width > 2560);
    Actions.apiGetPicList();
  } else {
    React.initializeTouchEvents(true);
    _bodyStyle = {
      color: "white",
      height: '100%',
      margin: '0',
      overflow: 'hidden'
    };
    AppStore.trigger();
  }
}