反應：將狀態從一個組件導入到另一個組件？

Question

Link組件被加載到Foot組件中（在底部可見）。

我想讓Content組件加載初始狀態，並在用戶單擊適當的按鈕時更改狀態。

除非狀態在同一個組件中，否則我似乎無法更改狀態，但是將狀態加載到ul中很奇怪。

鏈接組件

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 {
  constructor() {
    super();
    this.state = {page: <Home />}
  }

  loadPage = (page) => {
    this.setState({page: page})
  }

  render() {
    const links = [
      {
        title: 'Home',
        page: <Home />
      }, 
      {
        title: 'Characters',
        page: <Characters />
      }, 
      {
        title: 'Plot',
        page: <Plot />
      }, 
      {
        title: 'Scenes',
        page: <Scenes />
      }, 
      {
        title: 'Notes',
        page: <Notes />
      }
    ]

    const link = links.map((item, index) => {
      return (
        <li key={index}>
          <button onClick={() => this.loadPage(item.page)}>
            {item.title}
          </button>
        </li>
        )
    })
    return (
      <ul className="Link">
        {link}
      </ul>
    );
  }
}

export default Link;

內容成分

import React, { Component } from 'react';

import Link from './Link';

class Content extends Component {

  render() {
    return (
      <div className="Content">
        {/*this.state.page goes here*/}
      </div>
    );
  }
}

export default Content;

足部組件 （無關緊要，但一般鏈接會在此處

import React, { Component } from 'react';

import Link from './Link'

class Foot extends Component {

  render() {
    return (
      <footer className="Foot">
        <Link />
      </footer>
    );
  }
}

export default Foot;

Answer 1

如果您使用的是最新的React版本，則可以使用React上下文來傳遞數據。

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

在鏈接組件中使用提供程序。

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

在內容組件中使用使用者。

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

有關更多詳細信息，請參閱官方文檔。 https://reactjs.org/docs/context.html#reactcreatecontext

Answer 2

您將需要使用“ Props ”將點擊的鏈接向上推至父級。 因此，對於以下示例，我假設內容將是父組件。

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;

腳組件是鏈接組件的父級。

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;

並且主要的父級（鏈接組件的祖父母）將成為內容組件。

// 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提出的方案，即使用Context API。 使用ContextAPI，您可以擁有提供者和使用者，並且如果您遵循他發送的鏈接，則可以將內容直接從鏈接組件傳遞到內容組件。