Question

学习反应＆amp; chrome很难扩展，所以我的this.url有两个值之一：

null或www.sample.com

我使用chrome.storage.local.get(...)从异步调用中获取url值，所以一旦我从存储中获得响应，我将值设置为this.url并希望使用此值来显示使用的组件像这样的三元运算符：

export default React.createClass({

  url: '',

  componentDidMount: function(){
    this.observeResource();
  },


  observeResource(){
    var self = this
    function getValue(callback){
      chrome.storage.local.get('xxxx', callback);     
    }
    getValue(function (url) { 
      this.url = url.xxxx;
      return this.url;
    });
  },

  /* RENDER */
  render: function(){
    return (
      <div className="app">
        <AppHeader />
          {this.url != null ?
          <VideoFoundOverlay />
        : null}

        {this.url == null ?
          <VideoNotFoundOverlay />
        : null }             
      </div>
    )
  }
});

我无法在this.url函数之外获得observeResource的值。我哪里错了？

Answer 1

您需要使用this.setState()

constructor(props) {
  super(props)
  this.state = {
    url: ''
  }
}

componentDidMount() {
  setTimeout(() => {
    this.setState({ url: 'www.sample.com' })
  }, 1000)
}

render() {
  return <div>this.state.url</div>
}

查看JSFiddle

中的工作示例

Answer 2

以下调用中的this指向window而不是组件本身，因为回调被调用为函数，window实际上是＆＃34 ;所有者＆＃34;功能。
```
getValue(function (url) { 
  this.url = url.newswireStoryUrl;
  return this.url;
});
```
要避免此错误，您可以改为使用self.url，因为您已明确指定this到self。或者您可以使用Arrow Function代替function(...)。

要呈现组件，您应该将url声明为状态，因为只有状态更改才会调用render函数。

export default React.createClass({
  getInitialState: function() {
    return { url: '' };
  },
  componentDidMount: function(){
    this.observeResource();
  },
  observeResource(){
    var self = this;
    function getValue(callback){
      chrome.storage.local.get('newswireStoryUrl', callback);     
    }
    getValue(function (url) { 
      self.setState({ url: url.newswireStoryUrl });
      return self.state.url;
    });
  },
  /* RENDER */
  render: function(){
    return (
      <div className="app">
        <AppHeader />
          {this.state.url !== null ?
          <VideoFoundOverlay />
        : null}

        {this.state.url === null ?
          <VideoNotFoundOverlay />
        : null }             
      </div>
    );
  }
});

Answer 3

我会过去这样做：

{{1}}

React show component基于变量值

3 个答案: