好的，我意识到这段代码很臭，但只是忍受了我一会儿。
我正在玩the code here并且this关键字出现了奇怪的情况。
在下面的代码段中，我想在TopBar按下按钮以触发goose中的index.ios.js方法。但是，goose this内部是指曾孙子：
儿童= ComponentOne
孙子= VoterScreen
曾孙子= TopBar
显然，这是由于我将props传递给TopBar的方式，我确定不是“反应原生”办法＆＃39;但任何人都可以告诉我：
1 - 如何调整下面的代码并正确引用this（从我读过的内容会因为状态的变化而再次调用render，从而消除了需要调用forceUpdate（））。
OR：
2 - 如何通过编辑goose的工作方式，让曾孙呼叫this this callbacks index.ios.js。{ p>
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View
} from 'react-native';
import VoterScreen from './components/voter-screen.js'
export default class StyleAB extends Component {
constructor(props)
{
super(props);
this.state =
{
componentSelected: 'One',
}
}
changeComponent = (component) =>{
this.setState({componentSelected: component});
}
goose(){
console.log('State before: ' + JSON.stringify(this.state));
this.state = { componentSelected: 'Two', }
console.log('State after: ' + JSON.stringify(this.state));
this.forceUpdate();
}
renderComponent(component) {
if(component == 'One') {
return <ComponentOne changeComponent={this.changeComponent} goose={this.goose} />
} else if(component == 'Two') {
return <ComponentTwo changeComponent={this.changeComponent} />
} else if(component == 'Three') {
return <ComponentThree changeComponent={this.changeComponent} />
}
}
render() {
console.log('Render is called');
return (
<View style={styles.container}>
{this.renderComponent(this.state.componentSelected)}
</View>
);
}
}
class ComponentOne extends Component {
render() {
return (
<VoterScreen sendData={this.props.goose}/>
)
}
}
class ComponentTwo extends Component {
render() {
return (
<UploadScreen/>
)
}
}
class ComponentThree extends Component {
render() {
return (
<ResultsScreen/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
}
});
AppRegistry.registerComponent('StyleAB', () => StyleAB);
的代码：
voter-screen.js import React, { Component } from 'react';
import { View } from 'react-native';
import { Button } from 'react-native-elements';
import TopBar from './top-bar.js'
class VoterScreen extends Component {
render() {
console.log('Render is called in VoterScreen');
let topIsA = true;
return (
<View style={{flex: 1}}>
<TopBar parentToggle={this.props.sendData}/>
</View>
);
}
}
export default VoterScreen
的代码：
top-bar.js import React, { Component } from 'react'
import { View } from 'react-native';
import { Button } from 'react-native-elements';
class TopBar extends Component {
render() {
console.log('Render is called in TopBar');
return (
<View style={{flex: 1, flexDirection: 'row', backgroundColor: 'black'}}>
<Button
raised
containerViewStyle={{backgroundColor: 'black'}}
icon={{name: 'camera', type: 'font-awesome', size: 20, style: {marginRight: 0, textAlign: 'center'}}}
buttonStyle={{backgroundColor: '#cd00cd', borderRadius: 10, width: 50, height: 50}}
onPress={this.props.parentToggle.bind(this)}
/>
</View>
)
}
}
export default TopBar
的代码：
index.ios.js修改： 答案是做三件事：
1 - 在return <ComponentOne changeComponent={this.changeComponent} goose={this.goose} />：
变化：
return <ComponentOne changeComponent={this.changeComponent} goose={this.goose.bind(this)} />
要：
<VoterScreen sendData={this.props.goose}/>
2 - 在同一档案中：
变化：
<VoterScreen sendData={this.props.goose.bind(this)}/>
要：
top-bar.js [谢谢克里斯]。
3 - 在onPress={this.props.parentToggle.bind(this)}：
变化：
onPress={this.props.parentToggle}
要：
If IsEmpty(L1) Then
Columns("L").EntireColumn.Hidden = True
Else
Columns("L").EntireColumn.Hidden = False
End If
[谢谢爱德华]。
答案 0 :(得分：1)
尝试绑定范围，然后将其传递下去......
<VoterScreen sendData={this.props.goose.bind(this)}/>
答案 1 :(得分：1)
如果您希望this引用父组件，为什么要将它绑定在曾孙子？
你试过这种方式吗？
onPress={this.props.parentToggle}
或者这个：
onPress={() => this.props.parentToggle}
答案 2 :(得分：1)
不确定我是否正确阅读了您的要求，但将goose(){更改为goose = () => {应该可以解决您的所有问题。此外，在渲染中绑定性能并不好，因此您可能希望在构造函数中要绑定或绑定的每个组件上创建另一个方法。