使用render函数渲染组件

Posted 2023-04-18

参考技术A

一、说明
Vue实例中除了 components 属性注册组件，还可以使用 render 属性。
指向一个函数，第一个固定形参 createElements ，是一个方法，调用它可以把指定组件模板渲染为html结构。
此 render 属性return返回的结果，会替换页面上此Vue实例 el 指定的那容器（所有都清空然后替换）。
二、实例

从异步函数渲染反应本机孩子

【中文标题】从异步函数渲染反应本机孩子

【英文标题】：Render react native child from async function

【发布时间】：2018-12-22 11:54:10

【问题描述】：

我正在尝试从一个 id 呈现一个反应原生组件，该 id 被提供给一个 http 请求，然后返回该组件可以使用的 json。由于 http 请求是异步的，因此传入 PostCard 渲染的数据是未定义的。我试图通过等待 getSinglePost 的返回来解决这个问题，但数据仍然未定义。 如果不清楚，render 函数会调用 renderCard 函数，该函数应该等待 getSinglePost 函数的 json，然后返回填充的 PostCard 反应组件。 有什么想法吗？

  async getSinglePost(id: string) 
    try 
      let url = preHTT + apiURL + port + 'post/id';
      url = url + '?postId=' + id;
      const response = await fetch(url, 
        method: 'POST',
        headers: 
          Accept: 'application/json',
          'Content-Type': 'application/json',
        ,
      );
      const responseJson: any = await response.json();
      // we should do better error handling gracefully
      if (responseJson['status'] === 'ERROR') 
        throw 'Could not retrieve data';
      
      // console.log(responseJson['payload']);
      return responseJson['payload'];
     catch (error) 
      console.error(error);
    
  

  async renderCard(id: string, type: string) 
    if (type === 'post')  ***here***
        const data = await this.getSinglePost(id);
        return <PostCard data=data goToProfile=this.moveToProfileScreen/>;
     else 
      return <EventCard goToProfile=this.moveToProfileScreen/>;
    



        ***render/return stuff above***
        this.state.markers.map((marker:any)  => (
          <Marker // marker on press function eventually
            key=marker['postid']
            coordinate=marker['location']
            image=this.emojiDict[marker['type']]
            >
            <Callout>
              <View flex>
                this.renderCard(marker['postId'], marker['contentType'])
              </View>
            </Callout>
          </Marker>
        ***render/return stuff above***

【问题讨论】：

render 不能是异步的，你也不应该从渲染中做 http 请求。

【参考方案1】：

render 是同步的，不会等待异步例程完成。在这种情况下，组件应该在例程完成时重新渲染。

可以这样做：

  async componentDidMount() 
    try 
      const asyncData = await this.getAsyncData();
      this.setState( asyncData );
     catch (err) 
      // handle errors
    
  

  render() 
    if (this.state.asyncData) 
      // render child component that depends on async data
     else 
      // initial render