时间戳

首页 > 解决方案 > 如何访问传递给 React.Component 的道具

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

问题描述

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

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.langinside获得它吗Nav？当我尝试它说lang未定义。

标签： javascriptreactjsnext.js

解决方案

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

首先，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似乎没有设置为组件的属性。

推荐阅读