gpt4 book ai didi

javascript - 使用 React 和一个
id 的网页

转载 作者:行者123 更新时间:2023-11-29 21:37:27 25 4
gpt4 key购买 nike

我仍在学习 React,发现它比我预期的要难一些,我还在学习 Web 开发。

如果我们的应用中只有一个 View ,并且只有一个 div,如下所示:

<body>

<div id="react-app"></div>

</body>

这是否意味着我们所有的 React 组件都将追溯到一个 React 父组件?

这是否意味着当我们渲染页面时,我们只调用顶层父组件上的 render() ,然后 React 会处理剩下的事情?如果我们正在等待数据,我们如何异步渲染子元素?

最佳答案

does that mean that our all our React components will be traced up to one React parent component?

是的。你的 React 应用程序将是一棵树,它有一个单一的顶级父节点。当该父节点被渲染时,React 将递归调用 render对于您在其父级的 render 中声明的任何子组件称呼。

How can we render child elements asynchronously, if we are waiting for data?

React 的整体思想是声明你的 UI 在任何情况下的样子,例如初始状态、等待数据状态、数据返回状态和数据错误状态。

考虑以下示例:

class App extends Component {
constructor() {
super()

// set initial state
this.state = { images: [], error: null }

getDataFromServer('url').then(

// success callback
data => this.setState({ images: data.images }),

// error callback
data => this.setState({ error: data.error })
)

render() {
return (
<div>
{ // only render ImageGallery component if async call returns with data
this.state.images.length > 0 &&
<ImageGallery images={ this.state.images } />
}
{ this.state.images.length === 0 &&
<div>Loading / No images returned.</div>
}
{ this.state.error &&
<ErrorPopup error={ this.state.error } />
}
</div>
)
}
}

子组件依赖于父组件的状态,<App /> , 它以多种方式获取其状态,包括构造函数中的 ajax 调用(或 componentWillMount, componentDidMount 等)

关于javascript - 使用 React 和一个 <div> id 的网页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34476606/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com