[英]How can I access props passed to React.Component
I want to get some props made in the root layer of my react app: 我想在我的应用程序的根目录中制作一些道具:
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>
)
}
}
so every new React.Component
created should inherit those props
. 因此,创建的每个新
React.Component
都应该继承这些props
。 But I'm not sure how I can get them. 但是我不确定如何获得它们。 Let's say I have another component which is
<Nav/>
. 假设我还有一个组件
<Nav/>
。
Shouldn't I be able to get it via props.lang
inside Nav
. 我是否应该能够通过
Nav
props.lang
获取它。 When I try it says lang
undefined. 当我尝试它说
lang
未定义。
I'm seeing a couple problems in your code example. 我在您的代码示例中看到了几个问题。
First , props
are a property on your component, they should be accessed via this.props
. 首先 ,
props
是组件的属性,应通过this.props
访问this.props
。
Here is a basic example of passing props to a child component: 这是将道具传递给子组件的基本示例:
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;
Using the code sample above, it would seem that your mistake was to use return <h1>{props.greeting}</h1>;
使用上面的代码示例,似乎您的错误是使用
return <h1>{props.greeting}</h1>;
instead of return <h1>{this.props.greeting}</h1>;
而不是
return <h1>{this.props.greeting}</h1>;
Second , it would appear that your component setup is a little off. 其次 ,您的组件设置似乎有些不足。 I would expect your component declaration to look something like this:
我希望您的组件声明看起来像这样:
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>
);
}
}
In your code sample, there's no constructor function and state
doesn't appear to be set as a property of your component. 在您的代码示例中,没有构造函数,并且
state
似乎未设置为组件的属性。
Inside of the example <Nav/>
component, you must specify at least one argument in the component's function if you wish to access this.props
. 在示例
<Nav/>
组件内部,如果要访问this.props
,则必须在该组件的函数中至少指定一个参数。 For example: 例如:
const Nav = (props) => ( <div> {this.props.lang} </div> )
Hope this helps! 希望这可以帮助!
Summary of my comments above: 我在上面的评论摘要:
Did you try
props.lang
, or,this.props.lang
?您是否尝试过
props.lang
或this.props.lang
?
Because you need this.props.lang
to access the property. 因为您需要
this.props.lang
才能访问该属性。
Hrm, just took a quick peek at my own code -- the initial state is set in constructor(props), and is defined like super();
嗯,只是快速浏览了一下我自己的代码-初始状态是在构造函数(props)中设置的,其定义类似于super(); this.state = (somestate);.
this.state =(somestate);。
Because you need to set the state in the constructor of classes. 因为您需要在类的构造函数中设置状态。
I would suggest moving language
to the React Context API 我建议将
language
移动到React Context API
So this way you create a context 这样,您可以创建上下文
// context.js
import React from 'react';
export const LangContext = React.createContext('pl');
and provide it inside _app.js 并在_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>
);
}
}
and whenever you need to access language
value you dont need to pass it anymore. 并且每当您需要访问
language
值时,就不再需要传递它。 It will be available on LangContext
. 它将在
LangContext
上LangContext
。 Example usage 用法示例
// 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;
This helps to solve the issue of passing lang
props to pages and then to some specific components like Nav. 这有助于解决将
lang
属性传递到页面,然后传递给Nav等某些特定组件的问题。 Just wrap a component into a <LangContext.Consumer>
if you need it. 只需将组件包装到
<LangContext.Consumer>
。
Example index.js page 示例index.js页面
// index.js
import Nav from '../components/Nav';
export default () => (
<div>
<Nav />
<hr />
Welcome to index.js!
</div>
);
** One note: as far as I see you can only use <SomeContext.Provider>
inside _app.js **注意:据我所知,您只能在_app.js中使用
<SomeContext.Provider>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.