javascript - 使用 ES 生成器渲染 React 组件

标签 javascript reactjs asynchronous ecmascript-6 generator

我有一个非常基本的 sleep 函数实现,它在 x 毫秒后解决了一个 promise :

module.exports = (ms) => new Promise(res => setTimeout(res, ms));

然后我需要在休眠后在 ES6 有状态类组件中渲染一个 React 组件,但这很遗憾地抛出了错误:Objects are not valid as a React child。这个生成器实现有问题吗?

import sleep from './sleep';
class Dummy extends React.Component {

  *renderSubComponent(arg) {
    yield sleep(1000);
    return (<ChildComponent {...arg} />);
  }

  render() {
    return (
     {this.props.check ? this.renderSubComponent(this.props.check).next() : null}
    );
  }

}

我不能使用异步/等待。

最佳答案

基本上,您无法实现此实现,因为生成器返回一个迭代器,如果不对迭代进行编程,则什么也不会发生。

一个更合理的解决方案是使用组件的状态,这样您就可以将状态保存在同一个组件中,然后您可以改变它

这就是组件的样子

class Dummy extends React.Component {
  constructor(props) {
    super(props);

    this.setState({
      renderSubComponent: false,
    });
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        renderSubComponent: true,
      });
    }, 1000);
  }

  render() {
    const { renderSubComponent } = this.state;
    let subComponent;

    if(renderSubComponent) subComponent = (<ChildComponent check={this.props.check} />);

    return (
      <div>
        {subComponent}
      </div>
    );
  }
}

关于javascript - 使用 ES 生成器渲染 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43667990/

相关文章:

php - 如何在 codeigniter 中发布动态输入标签

javascript - 三个js EffectComposer + BloomPass 不起作用

javascript - 我不想使用前缀,而是希望网站访问者升级他们的浏览器

javascript递归堆栈溢出

javascript - 如何在流程中设置动态 react 类变量

javascript - 异步/等待语法错误 : await is only valid in async functions and the top level bodies of modules

javascript - ReactTable (ReactJS) - 包含 HTML 内容的行中的搜索过滤不起作用

javascript - React Router - 除了使用 Context 之外,还有 'easier' 路由到新路径的方法吗?

node.js - 使用 async wait 有什么问题吗?

python - python中的asyncio.sleep()是如何实现的?