javascript - 如何在 Next.js 中获取 _app.js 的状态？

Question

我已经启动了_app.js使用 Next.js的状态。我想在index.js文件中使用这个状态。我怎样才能访问它？

这是我的_app.js代码：

import React from 'react';
import App, { Container } from 'next/app';
import Layout from '../components/Layout';

export default class MyApp extends App {
  constructor(props) {
    super(props);
    this.state = {
      currencyType: {
        name: 'Ether',
        price: 1,
      },
      ethPriceUsd: 1,
    };
  }

  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    let ethPriceUsd;

    if (Component.getInitialProps) {
      fetch(`https://api.coingecko.com/api/v3/coins/ethereum/`)
        .then((result) => result.json())
        .then((data) => {
          ethPriceUsd = parseFloat(data.market_data.current_price.usd).toFixed(
            2
          );
        });
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps, ethPriceUsd };
  }

  componentDidMount() {
    const ethPriceUsd = this.props.ethPriceUsd;
    this.setState({ ethPriceUsd });
  }

  onCurrencyTypeChange(currencyTypeValue) {
    let currencyType = {};
    //Value comes from Header.js where Ether is 0 and USD is 1
    if (currencyTypeValue) {
      currencyType = {
        name: 'USD',
        price: this.state.ethPriceUsd,
      };
    } else {
      currencyType = {
        name: 'Ether',
        price: 1,
      };
    }
    alert('We pass argument from Child to Parent: ' + currencyType.price);
    this.setState({ currencyType });
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        <Layout changeCurrencyType={this.onCurrencyTypeChange.bind(this)}>
          <Component {...pageProps} />
        </Layout>
      </Container>
    );
  }
}

其中很多是无关紧要的（比如将数据传递给布局等......）。我想做的就是在我的index.js.

标签： javascriptreactjsnext.js

Answer 1

假设您在_app.js.

import React from 'react'
import App, { Container } from 'next/app'

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  state = {
    name: "Morgan",
  }

  render () {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <Component {...pageProps} {...this.state}/>
      </Container>
    )
  }
}

请注意state和<Component {...pageProps} {...this.state}/>

解决方案1：

现在，让我们看看我们如何在index.js或任何其他页面中使用它

import React from 'react';

export default class Index extends React.Component {

  render() {
    return (
      <div>
        <h2>My name is {this.props.name}</h2>
      </div>
    )
  }
}

你可以像这样使用它们作为道具this.props.name

解决方案2：

index.js在from中填充状态，props然后从state

import React from 'react';

export default class Index extends React.Component {

   constructor(props) {
       super(props)
       this.state ={
           name: this.props.name
       }
   }

  render() {
    return (
      <div>
        <h2>My name is {this.state.name}</h2>
      </div>
    )
  }
}

你可以像这样使用它们作为道具this.state.name