我如何访问传递给React.Component的道具

Question

我想在我的应用程序的根目录中制作一些道具：

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 = {
    language: "pl"
  };

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

    return (
      <Container>
        <Component lang={this.state.language} />
      </Container>
    )
  }
}

因此，创建的每个新React.Component都应该继承这些props 。 但是我不确定如何获得它们。 假设我还有一个组件<Nav/> 。

我是否应该能够通过Nav props.lang获取它。 当我尝试它说lang未定义。

Answer 1

我在您的代码示例中看到了几个问题。

首先 ， props是组件的属性，应通过this.props访问this.props 。

这是将道具传递给子组件的基本示例：

import React, { Component } from 'react';

class App extends Component {
  render() {
    const greeting = 'Welcome to React';

    return (
      <div>
        <Greeting greeting={greeting} />
      </div>
    );
  }
}

class Greeting extends Component {
  render() {
    return <h1>{this.props.greeting}</h1>;
  }
}

export default App;

使用上面的代码示例，似乎您的错误是使用return <h1>{props.greeting}</h1>; 而不是return <h1>{this.props.greeting}</h1>;

其次 ，您的组件设置似乎有些不足。 我希望您的组件声明看起来像这样：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

在您的代码示例中，没有构造函数，并且state似乎未设置为组件的属性。

Answer 2

在示例<Nav/>组件内部，如果要访问this.props ，则必须在该组件的函数中至少指定一个参数。 例如：

const Nav = (props) => ( <div> {this.props.lang} </div> )

希望这可以帮助！

Answer 3

我在上面的评论摘要：

您是否尝试过props.lang或this.props.lang ？

因为您需要this.props.lang才能访问该属性。

嗯，只是快速浏览了一下我自己的代码-初始状态是在构造函数（props）中设置的，其定义类似于super（）; this.state =（somestate）;。

因为您需要在类的构造函数中设置状态。

Answer 4

我建议将language移动到React Context API

这样，您可以创建上下文

// context.js
import React from 'react';

export const LangContext = React.createContext('pl');

并在_app.js中提供

// app.js
import React from 'react';
import App, { Container } from 'next/app';
import { LangContext } from '../context';

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 = {
    language: 'EN'
  };

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

    return (
      <Container>
        <LangContext.Provider value={this.state.language}>
          <Component {...pageProps} />
        </LangContext.Provider>
      </Container>
    );
  }
}

并且每当您需要访问language值时，就不再需要传递它。 它将在LangContext上LangContext 。 用法示例

// Nav.js
import Link from 'next/link';
import { LangContext } from '../context';

function Nav() {
  return (
    <LangContext.Consumer>
      {lang => {
        return (
          <div className="site-nav">
            <Link href="/">
              <a>index</a>
            </Link>
            <Link href="/about">
              <a>about</a>
            </Link>
            language = {lang}
          </div>
        );
      }}
    </LangContext.Consumer>
  );
}

export default Nav;

这有助于解决将lang属性传递到页面，然后传递给Nav等某些特定组件的问题。 只需将组件包装到<LangContext.Consumer> 。

示例index.js页面

// index.js
import Nav from '../components/Nav';

export default () => (
  <div>
    <Nav />
    <hr />
    Welcome to index.js!
  </div>
);

**注意：据我所知，您只能在_app.js中使用<SomeContext.Provider>