React：将传入的服务数据传递给孩子

Posted 2023-02-16

【中文标题】React：将传入的服务数据传递给孩子

【英文标题】：React: Pass incoming service data to children

【发布时间】：2020-11-02 20:53:35

【问题描述】：

我正在开发一个连接到 websocket 并接收实时数据的 React 项目。目前我有一个 Websocket 组件来处理回调中的数据。我需要能够将这些传入数据传递给多个不同的子组件。我不确定最好的方法是什么。我试图坚持使用函数式组件，因为这似乎是 React 正在发展的方向。

这里有一些演示代码作为示例。

function Parent() 
    const handleData = function callback(data) 
        console.debug(data);
    ;

    return (
            <div className="container-main">
                <Websocket url='ws://localhost:8000/Service/' onMessage=handleData/>
                <Child />
            </div>
    );


export default Parent;

function Child() 
    return (
        <div>Websocket Message</div>
    );


export default Child;

您可以看到数据正在传入并由 handleData 回调处理。从那里我想用数据更新孩子中的 Websocket 消息。

我也可能以错误的方式思考这个问题。如果有更好的结构方式，我愿意接受建议。

【参考方案1】：

您可以利用context 将您想要的任何值传递给所有孩子。它看起来像这样：

// Parent
function Parent() 
  return (
    <div className="container-main">
      <Websocket url='ws://localhost:8000/Service/'>
        <Child />
      </Websocket>
    </div>
  );


// Websocket
const WebsocketContext = React.createContext();

function Websocket(children) 
  const [websocketData, setWebsocketData] = useState();

  // websocket logic that sets and updates state that is passed to WebsocketContext

  return (
    <WebsocketContext.Provider value=setWebsocketData, websocketData>
      children
    </WebsocketContext.Provider>
  );


//Child
function Child() 
  const websocketData = useContext(WebsocketContext);
  return (
    <div>Websocket Message</div>
  );

这个组合非常好，允许任何/所有孩子根据需要订阅上下文。