訂閱從另一個發布的一個 React 組件中的操作

Question

想象一下以下情況：我們開發了兩個智能組件並發布了兩個 npm 封裝。 之后，我們將組件導入另一個團隊開發的第三個 React 應用程序。

package.json

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

應用程序.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中的操作，例如更新某些列表？ 最好不修改源組件的邏輯。

Answer 1

正確的做法是

1. 使組件 ComponentUI2 成為完全受控或部分受控的組件。 讓專利傳入列表。暴露一個道具 someList
2. 當在 ComponentUI1 內觸發所述事件時，讓組件 ComponentUI1 觸發事件“someEvent”

3. 使父容器進行更新

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

現在在您的 ComponentUI1 或 2 中，您可以像這樣更改ComponentUI1List或ComponentUI2List ：

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