反应本机 (ES5) 到 (ES6)

Question

这个 ES6 给 React native 带来了一些问题。我想用纯 ES6 编写代码，但编写部分会出错。

ES5代码

renderScene: function (route, navigator) {
       var Component = route.component;
       return (
           <Component openModal={() => this.setState({modal: true})}/>
       )
   },

ES6 在哪里：

renderScene(route, navigator) {
    var Component = route.component;
    return (
        <Component openModal={() => this.setState({modal: true})  }/>
    )
}

我收到这个错误：

我尝试添加 bind(this) 但它不起作用。

有人可以帮忙吗？提前致谢

编辑：添加了完整的class代码

class Navigation extends Component {
    constructor(props) {
        super(props)
        this.state = {
            modal: false,
        }
    }

    renderScene(route, navigator) {
        var Component = route.component;
        return (
            <Component openModal={() => this.setState({modal: true})  }/>
        )
    }

    goToOtherRoute() {
        //this.refs.navigator.push({newRoute})
    }

    render() {
        return (
            <View style={styles.container}>
                <Navigator
                    ref="navigator"
                    initialRoute={RouteStack.app}
                    renderScene={this.renderScene}
                />
                {this.state.modal ? <Basket goToOtherRoute={this.goToOtherRoute} closeModal={() => this.setState({modal: false}) }/> : null }
            </View>
        );
    }
}

Answer 1

当然是这里：是的，扩展组件

class Navigation extends Component {
    constructor(props) {
        super(props)
        this.state = {
            modal: false,
        }
    }

    renderScene(route, navigator) {
        var Component = route.component;
        return (
            <Component openModal={() => this.setState({modal: true})  }/>
        )
    }

    goToOtherRoute() {
        //this.refs.navigator.push({newRoute})
    }

    render() {
        return (
            <View style={styles.container}>
                <Navigator
                    ref="navigator"
                    initialRoute={RouteStack.app}
                    renderScene={this.renderScene}
                />
                {this.state.modal ? <Basket goToOtherRoute={this.goToOtherRoute} closeModal={() => this.setState({modal: false}) }/> : null }
            </View>
        );
    }
}

Answer 2

像这样声明渲染场景：

renderScene = (route, navigator) => {
  //code
}

还有其他的选择，我都记下来了。

反应本机 (ES5) 到 (ES6)

React-native (ES5) to (ES6)

syntax-error

ecmascript-6

react-native