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

Question

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

根据我的实践，我了解到父组件将回调/onChangehandle 作为道具传递给子组件，并且它维护子组件状态的副本，尽管子组件呈现 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"/>
    }
}

Answer 1

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

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

加载外部反应模块的代码：

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} />
}

外部反应模块：

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

export { ReactComponent }