Syntax error 本机（ES5）与（ES6）反应

此ES6在React native中出现了一些问题。我想用纯ES6编写代码，但编写部分会出错

ES5代码

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

renderScene:函数（路由、导航器）{
var组件=route.Component；
返回(
this.setState（{modal:true}）}/>
)
},

其中ES6是：

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

renderScene（路线、导航器）{
var组件=route.Component；
返回(
this.setState（{modal:true}）}/>
)
}

我得到这个错误：

我试着添加bind（这个），但它不起作用

有人能帮忙吗？提前Thx

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

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>
        );
    }
}

<代码>类导航扩展组件{ 建造师（道具）{ 超级（道具） 此.state={ 莫代尔：错， } } renderScene（路线、导航器）{ var组件=route.Component； 返回( this.setState（{modal:true}）}/> ) } goToOtherRoute（）{ //this.refs.navigator.push（{newRoute}） } render（）{ 返回( {this.state.modal？this.setState（{modal:false}）}/>:null} ); } } 当然在这里： 对extends组件来说是的

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>
        );
    }
}

类导航扩展组件{
建造师（道具）{
超级（道具）
此.state={
莫代尔：错，
}
}
renderScene（路线、导航器）{
var组件=route.Component；
返回(
this.setState（{modal:true}）}/>
)
}
goToOtherRoute（）{
//this.refs.navigator.push（{newRoute}）
}
render（）{
返回(
{this.state.modal？this.setState（{modal:false}）}/>:null}
);
}
}

当然在这里： 对extends组件来说是的

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>
        );
    }
}

类导航扩展组件{
建造师（道具）{
超级（道具）
此.state={
莫代尔：错，
}
}
renderScene（路线、导航器）{
var组件=route.Component；
返回(
this.setState（{modal:true}）}/>
)
}
goToOtherRoute（）{
//this.refs.navigator.push（{newRoute}）
}
render（）{
返回(
{this.state.modal？this.setState（{modal:false}）}/>:null}
);
}
}

像这样声明渲染场景：

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

---

还有其他选项，我已经写下来了。

像这样声明renderScene：

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

---

还有其他选项，我已经写下来了。

你能发布整个类吗？你是否从

React.createClass

更改为

class extends Component

？我有。似乎

此

不是导航实例。你可以在

render

中使用一个console.log（this）并将其与控制台进行比较。在

renderScene

中使用一个log（this）可以发布整个类吗？你是否从

React.createClass

更改为

class extends Component

。似乎

此

不是导航实例。您可以在

渲染

中使用console.log（此）并将其与

渲染场景

中的console.log（此）进行比较。谢谢。已经在另一个链接上阅读了你的帖子。为什么其他两个选项不起作用，请你解释一下，当你像这样声明方法时，这三个选项应该起作用（我刚刚在我的项目中测试了这三个选项）。据我所知，箭头语法正在发挥作用。主要区别在于，Babel似乎将

this

绑定到被调用函数，而在其他两种方法中，您必须自己进行绑定。在

renderScene（）中使用
renderScene={this.renderScene.bind（this）}
或者在
super（props）
之后编写
this.renderScene=this.renderScene.bind（this）
也应该有效。实际上我是这样做的。问题是我把（这个）绑错地方了，所以它不起作用。我还有最后一个问题。请你解释一下{this.state.modal？这是一个“速记if”。语法是
condition？responseIfTrue:responseIfFalse
。它与
if（condition）{responseIfTrue}else{responseIfFalse}
相同。只推荐用于短句，因为它不太清晰。例如：
var color=isAllowed（something）？“绿色”：“红色”
Nice.最后，null和end表示这是有效的。Thx.已经在另一个链接上阅读了你的帖子。为什么其他两个选项不起作用，请你解释一下，当你像这样声明方法时，这三个选项应该起作用（我刚刚在我的项目中测试了这三个选项）。据我所知，箭头语法正在发挥作用。主要区别在于，Babel似乎将
this
绑定到被调用的函数，而在其他两种方法中，您必须自己进行绑定。在
renderScene={this.renderScene.bind（this）}
内部
render（）中使用
renderScene={this.renderScene.bind（this）}
或者在
super（props）
之后编写
this.renderScene=this.renderScene.bind（this）
也应该可以。我确实可以。问题是我绑定（this）到了错误的地方，所以它不起作用。还有最后一个问题。你能解释一下{this.state.modal吗？这是一个“如果”的缩写吗语法是
condition？responseIfTrue:responseIfFalse
。它与
if（condition）{responseIfTrue}else{responseIfFalse}
相同。它只建议用于短句，因为它不太清晰。例如：
var color=isAllowed（something）？'green'：'red'
Nice。最后，null和end的意思是