访问应用程序其他部分的构造函数中声明的类变量(React)
Posted
技术标签:
【中文标题】访问应用程序其他部分的构造函数中声明的类变量(React)【英文标题】:Accessing class variable declared in constructor in other parts of the app (React) 【发布时间】:2017-10-05 09:44:13 【问题描述】:我目前正在学习 React-native。我正在关注 Pluralsight 教程,但不幸的是他的一些代码已经过时了。 我有以下代码:
import Expo from 'expo';
import React from 'react';
import TaskList from './TaskList';
import
Component,
View,
Navigator,
Text
from 'react-native';
class todo extends React.Component
constructor(props,context)
super(props,context);
this.state =
todos: [
task: 'Task1',
,
task: 'Task 2',
,
]
onAddStarted()
this.nav.push(
name: 'taskform',
)
renderScene(route,nav)
switch(route.name)
case 'taskform':
return (
<Text>Add form comes here!</Text>
);
default:
return(
<TaskList onAddStarted=this.onAddStarted
todos=this.state.todos/>
);
render()
return (
<Navigator initialRoute=name: 'Tasklist'
ref=((nav)=>
this.nav=nav;
)
renderScene=this.renderScene/>
);
Expo.registerRootComponent(todo);
我的问题是:
todos=this.state.todos/>
如果我记录 this.state 它会出错并且状态未定义。如果我内联复制 todos 的内容,代码会编译,所以我知道它在范围界定方面存在一些问题,但我想我从根本上不明白如何正确地做到这一点。在我开始使用 Navigator 之前,我完全可以从构造函数中引用 this.state。
如果有人可以帮助我理解,我会很高兴。
谢谢!
【问题讨论】:
【参考方案1】:您需要提供 renderScene 上下文,以便它可以访问 this 及其状态。为此,您可以在渲染函数中修改以下行:
renderScene=this.renderScene
到
renderScene=this.renderScene.bind(this)
注意由于使用 bind 会生成一个新函数,这会降低性能(例如,如果您要渲染很多项目)。所以一个常见的模式是在构造函数中进行绑定:
this.renderScene = this.renderScene.bind(this);
如果您采用这种方法,您的渲染功能可以保持现在的状态。
【讨论】:
以上是关于访问应用程序其他部分的构造函数中声明的类变量(React)的主要内容,如果未能解决你的问题,请参考以下文章