IT技术 - React 动态下载组件并从所有子组件获取数据 - 吾爱随笔录

React 动态下载组件并从所有子组件获取数据

IT技术 reactjs

2021-05-23 11:58:47

我是新来的，这更多是一个设计问题，我打算
1) 从静态托管站点下载组件并显示它们。
2）通过（比方说）下载选项从组件获取所有数据

根据我的实践，我了解到父组件将回调/onChangehandle 作为props传递给子组件，并且它维护子组件状态的副本，尽管子组件呈现 HTML。但是，我想根据用户的输入从 API/静态托管动态下载组件，然后从所有这些组件中获取数据的字符串表示/状态。每个组件都有不同的状态数据，因此我无法编写通用的 onChangehandle。

问题：-

1）这样的设计可以与 react 一起使用吗？每个组件都可以将其库上传到云端吗？

2）我们是否可以强制在每个组件上编写方法，以便父组件可以调用每个组件的特定方法并获取数据？

我正在寻找的伪代码：-

class Parent extends Component {
    downloadData = (event) => {
        for(childComponents 1 to n){
            all_data += childComponent.getState()
        }
        pdf(all_data)
    }

    render(){
        // Render Child components
        for(childComponents 1 to n) {
        ChildComponent = // Load from API/Static hosting
        }
        <button onClick="downloadData"/>
    }
}

1个回答

你想要完成的事情绝对是可能的。我不是很喜欢类组件，所以我用 React 钩子编写了这个例子。

您可以执行以下操作从外部组件加载数据：将回调传递到您调用成功加载以接收数据的组件中。尽管如此，我不建议这样做。我会从与组件不同的 api 获取数据。您应该始终将数据拆分为可视化和代表用户界面的组件。

加载外部reactmodule的代码：

import React, { useEffect, useState, useRef } from 'react'

export function Loader({ id }) {
  const [loading, setLoading] = useState(true)
  const ref = useRef()

  const [data, setData] = useState({})

  useEffect(() => {
    async function fetchReactComponent() {
      await import(
        /*webpackIgnore: true*/ `https://example.com/react-components/${id}`
      ).then(module => {
        setLoading(false)
        const node = module["ReactComponent"](data, setData)

        if (ref.current) {
          ref.current.innerHTML = ''
          if (typeof node === 'string') {
            ref.current.innerHTML = node
          } else {
            ref.current.appendChild(node)
          }
        }
      })
    }

    fetchReactComponent()
    // eslint-disable-next-line
  }, [id])

  return loading ? <div>Loading...</div> : <div ref={ref} />
}

外部reactmodule：

function ReactComponent(data, setData) {
  // do something with the data
  return '<h1>A component</h1>'
}

export { ReactComponent }

其它你可能感兴趣的问题

上一篇如何将存储在 JSON 提要中的地图标记添加到现有的 React Google 地图？下一篇Firebase、react 和 redux 等待商店更新