如何访问传递给 React.Component 的 props

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

我建议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道具传递到页面然后传递到某些特定组件(如 Nav(的问题。如果需要，只需将组件包装到<LangContext.Consumer>中即可。

示例索引.js页

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

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

Answer 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似乎未设置为组件的属性。

Answer 3

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

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

希望这有帮助！

Answer 4

我上面评论的摘要：

你试过props.lang，还是，this.props.lang？

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

嗯，只是快速浏览了一下我自己的代码 - 初始状态是在constructor(props(中设置的，并且像super((一样定义; this.state = (somestate(;。

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