Javascript 在React中，有没有比从map中引用外部类更标准的方法？

我很抱歉这个标题的措辞如此糟糕，但我只是在学习React，我得到了一些让人感觉有点粗糙的东西，我正在努力正确地理解它

以下是我最初无法使用的代码（removeItem部分抛出了一个错误，因为this.removeItem未定义）

render（）{
返回(

{this.state.listItems.map（函数（项，索引）{
返回(
);
})}

);
}

我意识到这与作用域有关，因为map（）中的“this”与addItem所指的“this”不同。我提出的解决方案只是在单独的变量中定义“this”，以便在map（）中使用

render（）{
var theApp=这个；
返回(

{this.state.listItems.map（函数（项，索引）{
返回(
);
})}

);
}

---

我的问题是——我觉得我没有在其他人的代码或教程中看到过这种方法，但我不能完全了解正在发生的事情以及处理这种事情的更好方法。任何关于谷歌的想法，甚至是建议都非常感谢

这称为

上下文绑定

，您需要绑定正确的

上下文

，否则

此

关键字（指向反应组件）在

映射中不可用。你可以这样写：

1.使用
箭头功能
：

{   
    this.state.listItems.map( (item,index) => {
        return (
            <ListItem id={index} key={index} title={item} removeItem={this.removeItem.bind(this)} />
        );
    })
}

建议：您应该在
构造函数
中绑定
方法中的事件，而不是
绑定
，这样可以避免在重新渲染过程中创建新函数

参考：

有关
箭头功能的更多详细信息，请检查以下答案：
您基本上是正确的。然而，你要找的词是“上下文”，而不是“范围”

作用域是变量声明对其他代码可见的程度。变量要么在全局范围内，要么在调用它的函数的本地范围内

上下文专门处理关键字
this
的值
此
引用在其中调用函数的对象。在React中，由于所有函数都是从组件对象内部调用的，
this
的值通常是组件本身

关于这个问题的解决方法——它是完全有效的，事实上开发人员经常使用它。您经常会看到类似于
var self=this
的内容，因此可以轻松地保留
this
的原始值

但是，如果您使用ES6编码或使用Babel或其他transpiler，则可以使用ES6“箭头函数”：

render（）{
返回(

{this.state.listItems.map（（项，索引）=>{
返回(
);
})}

);
}

尽管是一个新的函数调用，“箭头函数”不会为
这个
绑定一个新值。相反，它使用调用它的上下文的
this
值。在这种情况下，它非常方便；我和其他开发人员一直在使用它，因此它非常时髦。
您希望将类上下文保留在map函数中。为了提高性能，您应该在返回映射时使用预先绑定到类的函数

removeItem = () => {
    ...
}
listItem = (item, index) => {
    return (
        <ListItem id={index} key={index} title={item} removeItem={this.removeItem} />
    );
}
getListItems = () => {
    return this.state.listItems.map((item,index) => this.listItem(item, index))
}
render() {
    const elems = this.getListItems();
    return (
      <div className="App">
        <AddItem addItem={this.addItem.bind(this)} />
        <ul>
          {elems}
        </ul>
      </div>
    );
  }

注意，通常您不希望在
呈现
方法中绑定
；处理程序应该在构造函数中绑定或通过类属性创建。
{   
    this.state.listItems.map( (item,index) => {
        return (
            <ListItem id={index} key={index} title={item} removeItem={this.removeItem.bind(this)} />
        );
    })
}

{   
    this.state.listItems.map( function(item,index) {
        return (
            <ListItem id={index} key={index} title={item} removeItem={this.removeItem.bind(this)} />
        );
    }.bind(this))
}

render() {
    return (
      <div className="App">
        <AddItem addItem={this.addItem.bind(this)} />
        <ul>
          {this.state.listItems.map((item,index) => {
              return (
                  <ListItem id={index} key={index} title={item} removeItem={this.removeItem.bind(this)} />
              );
          })}
        </ul>
      </div>
    );
  }

removeItem = () => {
    ...
}
listItem = (item, index) => {
    return (
        <ListItem id={index} key={index} title={item} removeItem={this.removeItem} />
    );
}
getListItems = () => {
    return this.state.listItems.map((item,index) => this.listItem(item, index))
}
render() {
    const elems = this.getListItems();
    return (
      <div className="App">
        <AddItem addItem={this.addItem.bind(this)} />
        <ul>
          {elems}
        </ul>
      </div>
    );
  }

constructor() {
    super();
    ...
    this.removeItem = this.removeItem.bind(this);
    this.listItem = this.listItem.bind(this);
    this.getListItems = this.getListItems.bind(this);
}