React-native (ES5) 到 (ES6)答案

【问题标题】：React-native (ES5) to (ES6)React-native (ES5) 到 (ES6)
【发布时间】：2016-04-21 17:11:39
【问题描述】：

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

【问题讨论】：

你能发布整个课程吗？
你是从React.createClass改成class extends Component吗？
我有a similar problem。 this 似乎不是 Navigation 实例。您可以在render 中使用console.log(this) 并将其与renderScene 中的console.log(this) 进行比较

标签： syntax-error react-native ecmascript-6

【解决方案1】：

像这样声明 renderScene：

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

还有其他选择，我已经写了here。

【讨论】：

哇这工作。谢谢。已在其他链接阅读您的帖子。为什么其他两个选项都不起作用，请您解释一下当您声明这样的方法时是什么意思
这三个选项应该可以工作（我刚刚在我的项目中测试了这三个）。据我所知，箭头语法是Babel at work。主要区别在于 Babel 似乎将 this 绑定到被调用函数，而在其他两种方法中，您必须自己进行绑定。在render() 中使用renderScene={this.renderScene.bind(this)} 或在super(props) 之后写this.renderScene = this.renderScene.bind(this) 也应该可以工作。
我确实做到了。问题是我绑定（这个）错误的地方，所以这就是它不起作用的原因。最后一个问题。你能解释一下 {this.state.modal 吗？
这是一个“如果”的简写。语法为condition ? responseIfTrue : responseIfFalse。与if (condition) {responseIfTrue} else {responseIfFalse} 相同。仅推荐用于短句，因为它不太易读。示例：var color = isAllowed(someStuff) ? 'green' : 'red'
不错。最后，null 和 end 意味着

【解决方案2】：

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

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

【讨论】：