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

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

package.json

App.jsx

import React，{useffect}来自“React”；
从“component-ui1”导入ComponentUI1；
从“component-ui2”导入ComponentUI2；
导出常量应用=（）=>{
useffect（（）=>{
//一些异步操作
}, []);
返回(
);
};

---

如何通过DOM在

ComponentUI1

中生成事件，从而触发

ComponentUI2

中的操作，例如，更新某些列表？最好不修改源组件的逻辑。

正确的方法是

使组件UI2完全受控或部分受控 受控组件。让专利通过列表。露出道具 某些人

当所述事件在ComponentUI1内部触发时，让ComponentUI1触发事件“someEvent”

使父容器进行更新

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

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

const [listAbc, setListAbc] = useState(0);

const eventAbc = () = {
  //... update listAbc
  // setListAbc()
}

return (
    <>
        <ComponentUI1 someProp={true} someEvent={eventAbc} />
        <ComponentUI2 someProp={false} someList={listAbc} />
    </>
);

import React，{useffect}来自“React”；
从“component-ui1”导入ComponentUI1；
从“component-ui2”导入ComponentUI2；
导出常量应用=（）=>{
useffect（（）=>{
//一些异步操作
}, []);
常量[listAbc，setListAbc]=useState（0）；
常量事件ABC=（）={
//…更新列表ABC
//setListAbc（）
}
返回(
);

})

---

正确的方法是

使组件UI2完全受控或部分受控 受控组件。让专利通过列表。露出道具 某些人

当所述事件在ComponentUI1内部触发时，让ComponentUI1触发事件“someEvent”

使父容器进行更新

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

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

const [listAbc, setListAbc] = useState(0);

const eventAbc = () = {
  //... update listAbc
  // setListAbc()
}

return (
    <>
        <ComponentUI1 someProp={true} someEvent={eventAbc} />
        <ComponentUI2 someProp={false} someList={listAbc} />
    </>
);

import React，{useffect}来自“React”；
从“component-ui1”导入ComponentUI1；
从“component-ui2”导入ComponentUI2；
导出常量应用=（）=>{
useffect（（）=>{
//一些异步操作
}, []);
常量[listAbc，setListAbc]=useState（0）；
常量事件ABC=（）={
//…更新列表ABC
//setListAbc（）
}
返回(
);

})

---

谢谢你的回答！它可以工作，但是有没有办法在不修改源组件的情况下做到这一点？当然，您应该动态地创建

props.changeState（{…props.state，ComponentUI2List:[{id:1，title:“New Generated Data”}]}）

，如何？您还需要一个类似于

someProps

的道具，然后像这样实现

props.changeState（{…props.state，ComponentUI2List:props.someProps}）

，不要忘记传递

someProps

谢谢！探索这个问题，我还发现github上有一个有趣的库，它允许您以本机方式订阅操作谢谢您的回答！它可以工作，但是有没有办法在不修改源组件的情况下做到这一点？当然，您应该动态地创建

props.changeState（{…props.state，ComponentUI2List:[{id:1，title:“New Generated Data”}]}）

，如何？您还需要一个类似于

someProps

的道具，然后像这样实现

props.changeState（{…props.state，ComponentUI2List:props.someProps}）

，不要忘记传递

someProps

谢谢！探索这个问题，我还发现github上有一个有趣的库，它允许您以本机方式订阅操作

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

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

const [listAbc, setListAbc] = useState(0);

const eventAbc = () = {
  //... update listAbc
  // setListAbc()
}

return (
    <>
        <ComponentUI1 someProp={true} someEvent={eventAbc} />
        <ComponentUI2 someProp={false} someList={listAbc} />
    </>
);

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

// ComponentUI1.jsx
import React from 'react';

export const App = (props) => 

     (
        <>
            <div className="container">
              <button onClick=(props.changeState({...props.state, ComponentUI2List: [{id: 1, title: "New Generated Data"}]}))
            </div>
        </>
    );