-1

在 React（通过 babel 使用 ES6）中，我试图创建一个静态方法来更新它所包含的组件的状态。将对象作为参数。问题是“this”永远不会绑定到词法范围。

static updateList = (Item) => {
    this.setState({ cartUpdated: Date.now() }); //setState is not available
}

在另一个组件中...

<div onClick={Cart.updateList.bind(this,this.props)}>Click</div>

起初我认为这可能是由于通过“bind”传递的“this”，但我在包含点击处理程序的组件中创建了一个重复的非静态箭头方法，我可以很好地访问词法“this”。

绝望中还尝试制作 setState 的静态克隆，但没有运气。

我认为这是一个结构/安全决定（如果我们泄露“this”，我们就会泄露所有内容！）但是如何处理对“this”的访问？此限制是否强制 updateList 函数必须位于 updateList 和带有单击处理程序的组件之上？当然，这实际上可能更像反应，但我很好奇。

4

2 回答 2

0

ES6static关键字仅适用于类的方法，不适用于标准属性。因此，您尝试的分配在语法上无效。一个人必须写：

static updateList(Item) {
    this.setState({ cartUpdated: Date.now() }); //setState is not available
}

请参阅MDN的文档以获得更清晰的解释。

于 2015-09-28T14:59:31.643 回答
0 

class StaticClass extends React.Component{
  static updateList(item) {
    this.setState({
      alert: Date.now()
    });
  }
}

class Cpn extends React.Component{
  constructor() {
    super();
    this.state = {};
  }
  
  render() {
    if (this.state.alert) {
      alert(this.state.alert);
    }
    
    return (
      <div onClick={StaticClass.updateList.bind(this, this.props)}>
        Click
      </div>
    );
  }
}

ReactDOM.render(
  <Cpn prop1="1" prop2="2"/>,
  document.body
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

似乎工作正常。好吧，也许 2015 年的情况有所不同？或者我可能误解了这个问题？无论如何，我的测试代码似乎工作正常。

于 2017-04-11T09:58:19.543 回答