我有一个非常基本的 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/