React: Импорт состояния из одного компонента в другой компонент?

Если вы используете последнюю версию реакции, вы можете использовать контекст React для передачи данных.

const {Provider, Consumer} = React.createContext(defaultValue);

Используйте поставщика в компоненте Link.

<Provider value = {/* some value */}>

Используйте потребителя в своем информационном компоненте.

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

Подробности смотрите в официальной документации. https://reactjs.org/docs/context.html#reactcreatecontext

Вам нужно будет использовать Props, чтобы подтолкнуть щелкнувшие ссылки к родительскому объекту. Итак, в следующем примере я предполагаю, что Content будет родительским компонентом.

import React, { Component } from 'react';

import Home from './Home';
import Characters from './Characters';
import Plot from './Plot';
import Scenes from './Scenes';
import Notes from './Notes';

class Link extends Component {
  // this.props.menuClicked(item.page) 
  // hits the menuClicked props of Foot Component
  render() {
    return (
      <ul className = "Link">
        {links.map( (item, index) => {
          return (
            <li key = { index }>
              <a href = "#" onClick = { () => this.props.menuClicked(item.page) }>
                { item.title }
              </a>
            </li>
          )
        })}
      </ul>
    );
  }
}

export default Link;

Компонент Foot является родительским элементом Link Component.

import React, { Component } from 'react';
import Link from './Link'
class Foot extends Component {
  constructor() {
    super();
    this.loadPage = this.loadPage.bind(this)
  }

  loadPage = (page) => {
    // notice this also pushes the page clicked up to the parent component which is 
    // the Content Component
    this.props.changePage(page);
  }

  render() {
    return (
      <footer className = "Foot">
        <Link menuClicked = { () => this.loadPage(page) } />
      </footer>
    );
  }
}

export default Foot;

И основным родительским элементом (прародителем компонента Link) будет компонент Content.

// Content
import React, { Component } from 'react';
import Footer from './Footer';
import Home from './Home';
import Characters from './Characters';
import Plot from './Plot';
import Scenes from './Scenes';
import Notes from './Notes';
import Link from './Link';

class Content extends Component {
  constructor() {
    super()
    // default page
    this.state = { page: 'Home' }
    this.changePage = this.changePage.bind(this);
  }
  // called everytime the Link is clicked
  changePage(newPage) {
    this.setState({
      page: newPage
    })
  }

  render() {
    const links = [
      {
        title: 'Home',
        page: <Home />
      }, 
      {
        title: 'Characters',
        page: <Characters />
      }, 
      {
        title: 'Plot',
        page: <Plot />
      }, 
      {
        title: 'Scenes',
        page: <Scenes />
      }, 
      {
        title: 'Notes',
        page: <Notes />
      }
    ];
    let contentToLoad = null,
      pageToLoad = this.state.page;
    links.forEach( (item) => {
      if (item.title == pageToLoad) {
        contentToLoad = item.page;
      }
    });

    return (
      <div className = "Content">
        { contentToLoad }
        <Footer changePage = { this.changePage } />
      </div>
    );
  }
}

export default Content;

На основе ссылки, по которой щелкнули в компоненте ссылки, соответствующий контент будет загружен в компонент контента. Как вы можете видеть, Foot Component просто передает то, что Link Component подталкивает к Content Component, вы можете либо полностью отказаться от Foot Component, либо использовать то, что предлагает @ShubamGupta, то есть использовать контекстные API. С ContextAPI у вас могут быть провайдер и потребитель, и если вы перейдете по ссылке, которую он отправил, вы сможете передавать контент непосредственно из компонента ссылки в компонент контента.