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

【问题标题】：How can I access props passed to React.Component如何访问传递给 React.Component 的道具
【发布时间】：2018-10-03 16:09:59
【问题描述】：

我想在我的 react 应用的根层制作一些道具：

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/>。

我不应该能够通过props.lang 在Nav 中获得它吗？当我尝试时，它显示lang undefined。

【问题讨论】：

你试过props.lang，还是this.props.lang？
我试过了，它是未定义的。请注意，我尝试在另一个组件中访问它，例如：const Nav = () => ( <div> {this.props.lang} </div> )，我在想 Nav 继承自 React.Component 它应该得到lang？
我看到了一个状态定义。如果您希望 this.state.language 成为您认为的样子，您需要致电 this.setState(state);。
@HoldOffHunger 仅在我需要更新时才对吗？
Hrm，刚刚快速浏览了一下我自己的代码——初始状态设置在constructor(props)，定义为super(); this.state = (somestate);。

标签： javascript reactjs next.js

【解决方案1】：

我建议将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 上提供。示例用法

// 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 props 传递给页面，然后传递给一些特定组件（如 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>

【讨论】：

似乎是个好主意，但似乎对我不起作用。我复制了您的设置，但导航中未定义 lang。
我用代码github.com/yuyokk/nextjs-context-api-usage-example设置了一个快速回购
你太棒了我的朋友。谢谢！
再确认一件事，这与传递给 Nav 的道具不矛盾，对吧？所以它们照常可用。
这就是我在上下文中添加changeLang 方法的原因。所以现在 Nav 得到 two params 其中第二个是在上下文中更改 lang 值的函数

【解决方案2】：

我在您的代码示例中发现了一些问题。

首先，props 是您组件上的一个属性，应该通过this.props 访问它们。

这是一个将 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 似乎没有设置为组件的属性。

【讨论】：

我不明白，我需要通过所有元素向下传递道具吗？我想如果我在组件上设置道具，我可以在所有从 Component 继承的元素中使用它们，而无需将其传递给每个组件。
正确，您必须将props 传递给每个子组件。
所以假设我有一个index.js 渲染一个Nav 和一个Content 组件，我只做<Nav lang={this.props.lang} /> <Content lang={this.props.lang} />?
别担心，我害怕。

【解决方案3】：

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

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

希望这会有所帮助！

【讨论】：

【解决方案4】：

上面我的cmets总结：

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

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

Hrm，刚刚快速浏览了一下我自己的代码——初始状态在构造函数（props）中设置，并且定义为 super(); this.state = (somestate);.

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

【讨论】：