Question

问题专门与传递“ this”有关，以便在React无渲染组件中设置状态

我正在根据从XHR调用中检索到的数据设置初始状态。像这样在主应用程序中效果很好：

export default class App extends Component {
  constructor() {
    super();
    this.state = { someKey: [] };
  }
  
  XhrLoader() {
    const req = new XMLHttpRequest();
      ... 
    this.setState({someKey: [data]});
  }

  componentDidMount() {
    this.XhrLoader();
  }
}

在导出XhrLoader函数时，您可以通过以下方式将“ this”传递给模块：

import XhrLoader from 'Xhrloader';
export default class App extends Component {
  constructor() {
    super();
    this.state = { someKey: [] };
  }

  componentDidMount() {
    this.XhrLoader(this);
  }
}

  // imported module
  XhrLoader(app) {
    const req = new XMLHttpRequest();
      ... 
    app.setState({someKey: [data]});
  }

或者，您也可以传递一个绑定的组件：

export default class App extends Component {
  constructor() {
    super();
    this.state = { prodList: [] };
    this.SetState = this.SetState.bind(this);
  }

  componentDidMount() {
    XhrLoader(this.SetState);
  }

  SetState(newState) {
    this.setState(newState);
  }
}

// in XrhLoader
export default function XhrLoader(setAppState) {
 ...
 setAppState({someKey: newData)}
}

该组件不呈现任何内容，通常只会通过prop传递数据和方法：

< XhrLoader setter={someBoundMethod} />

但是如果渲染返回null，则这种方式将执行不必要的渲染

是否有正确的React样式可以从导入的无渲染组件中获得设置状态？

Answer 1

reactjs.org文档说：

从概念上讲，组件就像JavaScript函数一样。它们接受任意输入（称为“道具”），并返回描述应该在屏幕上显示的内容的React元素。

那么，仅使用组件来获取数据并不是一个好的模式。

为此，如果您为 XhrLoader 创建另一个JavaScript模块（文件），然后将其导入到组件中，并在带有回调的 componentDidMount 中使用它。

<div class="container">
  
  <div class="container_inner">
  MY IMAGE
  
  <p>Either an &lt;img&gt; element,</p>
  <p>  or a background-image for the container.
    
  <p>The side slash is just a white &lt;div&gt; rotated 5 degrees.</p>
  </div>  
  
  <div id="side-shape"></div>
  
</div>


<div class="container">
  
  <div class="container_inner">
  SAME AS ABOVE
  
  <p>Same as above, except The side slash is a white &lt;svg&gt; triangle.</p>
  
<svg id="side-shape2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <polygon points="100 0, 100 100, 90 100"/>
</svg>
  
</div>

如果您使用axios之类的库，也可以通过以下承诺实现您的结果：

// xhrLoader module

export function xhrLoader(onSuccessCallback) {
   const req = new XMLHttpRequest();
   ... 
   if (onSuccessCallback) onSucceessCallback(result);
}

// App.jsx
import {xhrLoader} from "xhrLoader.js";

export default class App extends Component {
    constructor() {
       super();
       this.state = { prodList: [] };
    }
    componentDidMount() {
       const onSuccess = (result) => {
          this.setState({prodList: result});
       }
       xhrLoader(onSuccess);
    }
 }

您可以将它作为参数传递给React中的非渲染组件吗？

1 个答案: