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

Question

Imagine the following situation: we've developed two smart components and released two npm packages. After that we imported components to third React application which developed by another team.

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

How can I generate an event in ComponentUI1 through DOM so that it triggers an action in ComponentUI2 , for example, updating some list? Preferably without modifying logic of source components.

Answer 1

The right way to do it is

1. make component ComponentUI2 a fully controlled or partially controlled component. Let the patent pass the list in. Expose a prop someList
2. Let component ComponentUI1 fire a event 'someEvent' when the said event is fired inside ComponentUI1

3. Make the parent container make the update

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

   };

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

now in your ComponentUI1 or 2 you can change ComponentUI1List or ComponentUI2List like so:

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