订阅从另一个发布的一个React组件中的动作

Question

想象一下以下情况：我们已经开发了两个智能组件并发布了两个npm软件包。之后，我们将组件导入到另一个团队开发的第三个React应用程序中。

package.json] >>

"dependencies": {
  "component-ui1": "0.1.1",
  "component-ui2": "0.1.0"
}
App.jsx

import React, { useEffect } from 'react';
import ComponentUI1 from 'component-ui1';
import ComponentUI2 from 'component-ui2';

export const App = () => {
    useEffect(() => {
       // Some asynchronous actions
    }, []);

    return (
        <>
            <ComponentUI1 someProp={true} />
            <ComponentUI2 someProp={false} />
        </>
    );
};
如何通过DOM在ComponentUI1中生成事件，以使其触发ComponentUI2中的操作，例如，更新某些列表？

想象一下以下情况：我们已经开发了两个智能组件并发布了两个npm软件包。之后，我们将组件导入到另一个团队开发的第三个React应用程序中。 ...

Answer 1

正确的方法是

Answer 2

import React, { useState, useEffect } from 'react';
import ComponentUI1 from 'component-ui1';
import ComponentUI2 from 'component-ui2';

export const App = () => {

    const [state, setState] = useState({ComponentUI1List: [], ComponentUI2List: []});

    useEffect(() => {
       // Some asynchronous actions
    }, []);

    return (
        <>
            <ComponentUI1 state={state} changeState={(data) => setState(data)} />
            <ComponentUI2 state={state} changeState={(data) => setState(data)} />
        </>
    );
};