Question

我是React的新手，这些概念对我来说还是新手。我正在研究这个例子，我想知道是否可以用另一种方式重写它并避免完全使用.bind。这里的目标只是尽可能减少所需的代码！

完整的例子可以在这里找到：

该组件只是呈现菜单列表，当您单击某个项目时，它会突出显示所选文本。

ES5

<ul className='languages'>
      {languages.map(function (lang) {
        return (
          <li
            style={lang === this.state.selectedLanguage ? {color: '#d0021b'} : null}
            onClick={this.updateLanguage.bind(null, lang)}
            key={lang}>
              {lang}
          </li>
        )
      }, this)}
    </ul>

** ES6 =＆gt; **

<ul className='languages'>
      {languages.map(lang => {
        return (
          <li
            style={lang === this.state.selectedLanguage ? {color: '#d0021b'} : null}
            onClick={this.updateLanguage.bind(null, lang)}
            key={lang}>
              {lang}
          </li>
        )
      },)}
    </ul>

Answer 1

你想要做的是让每个项目成为一个组件，这样你的渲染中没有内联绑定

{languages.map(lang => <ListItem lang={lang} updateLanguage={this.updateLanguage} selected={lang === this.state.selectedLanguage } />)}

然后您的列表项使用单个绑定实例处理单击。

class ListItem extends Component {
    handleClick = () => {
        this.props.updateLanguage(this.props.lang);
    }
    render() {
        return (
            <li 
                style={this.props.selected ? {color: '#d0021b'} : null}
                onClick={this.handleClick}
            >
                {this.props.lang}
            </li>
        )
    }
}

Answer 2

首先绑定到null，如果updateLanguage的代码如下：

updateLanguage(lang){
    this.x;
}

它会抛出一个空指针异常，你可能想要绑定到this。

现在为什么有人会绑定？解释一下updateLanguage的示例定义：

updateLanguage(lang){
    this.setState({language: lang});
}

在此功能中，我们希望this成为React组件，因为我们在这里使用setState。

但是当您使用此功能注册事件时，触发该事件的任何人都将在updateLanguage的正文中this，因此上面的this将是例如li。 setState this没有<li onClick={() => this.updateLanguage(lang)} </li>。

通过绑定你确保this将成为组件，无论如何你可以通过这样做摆脱绑定：

updateLanguage : (lang) => {
}

因为当把它注册为箭头函数时，我们实际上注册了一个关闭<li onClick={this.updateLanguage(lang)} </li>这个组件的闭包，无论你喜欢这种风格，我都会留给你。

另一种方法是使用propery语法初始化器，例如：

Catchable Fatal Error: Argument 5 passed to Symfony\Bundle\FrameworkBundle\Translation\Translator::__construct() must be of the type array, object given, called in /dev/shm/appname/cache/dev/appDevDebugProjectContainer.php on line 4100 and defined

然后

0r
  * master
    remotes/git-svn

顺便提一下React Docs中提到了这些方法，请看这里： https://facebook.github.io/react/docs/handling-events.html

避免使用.bind与ES6 =＆gt;

2 个答案: