如何將數據從 vanilla JavaScript 傳遞到 React 功能組件

Question

我正在嘗試從“常規”（香草）JavaScript 中更新（setState）一個 React 功能組件。

我搜索了 StackOverflow，但所有答案都涉及將數據從 React 傳遞到（香草）JavaScript，而不是相反。

讓我們以文檔中的示例為例：

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

為了在 JavaScript 中渲染它，我這樣做：

let example = ReactDOM.render(
    <Example />,
    document.getElementById('example-wrapper')
);

現在假設我想在反應之外手動更新香草 JavaScript 代碼的計數。 喜歡：

function updateExampleCount(newCount) {
    example.setCount(newCount);   // ???
}

我無法訪問組件 state，因為 setCount 是 function 內的私有變量，從render返回的example是null 。

如果我使用 class 組件，則render返回對該組件的引用，然后我可以調用example.setState 。 但如果可以避免的話，我不希望將我的組件轉換為 class。

render文檔說：

在提供的容器中將 React 元素渲染到 DOM 中並返回對組件的引用（或返回 null 用於無狀態組件）。

但是我的組件確實有一個 state （計數），它只是無法識別它。 如果無法使用render的返回值，是否有另一種方法可以“獲取”組件然后使用 setCount （或其他設置狀態的方法）？

還是我只需要為此使用 class 組件？

謝謝。

Answer 1

無法從組件外部訪問 state。 這就像試圖從 function 外部訪問一個局部范圍的變量。

使用 class 組件也無濟於事，因為您無法獲取在 React 應用程序中創建的 class 實例。

---

如果要從應用程序外部觸發 state 更改，則應用程序需要提供事件處理程序。

對於（一個非常快速和骯臟的）示例：

const outside = {
    value: 2,
    callbacks: [],
    addCallback: function (callback) { this.callbacks.push(callback); },
    setValue: function (value) { 
        this.value = value; 
        this.callbacks.forEach(
            callback => callback(this.value)
        );
    }
};

function Component = () => {
    const [val, setVal] = useState(outside.value);
    useEffect(() => {
        outside.addCallback((value) => setVal(value));
    }, []);
    return <p>{val}</p>
}

Answer 2

有可能的。 您可以將setCount function 作為參數傳遞給 React 之外的 JS 中使用它 - 但我不會真的推薦這個。

我建議您將業務邏輯和 React 邏輯分開。

唯一需要注意 state 並將使用它的是 React 組件本身。 我會以不與 React 耦合的方式構建您的代碼，並且不必以任何方式使用或依賴 React state。

這在開始時說起來容易做起來難。 如果您需要幫助，也許可以提供一個您試圖以這種方式解決的用例，並且可能會提供更好的答案。

Answer 3

這可以通過擴展Example來完成，因此它將對setCount function 的引用傳遞回父代碼，見下文。 （這可能與 Oli 提到的相同，如果是這樣，那么我有相同的想法並在回答之前做了一個工作實現）

 const { useState } = React; // functionFromComponent will store the function from Example. let functionFromComponent = undefined; const setter = (someFn) => functionFromComponent = someFn; const Example = ({ setFunction }) => { // take `setFunction` from props const [count, setCount] = useState(0); setFunction(setCount); // pass setCount to the parent code return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ReactDOM.render( <Example setFunction={setter} />, document.getElementById('example-wrapper') ); function buttonClicked() { if (functionFromComponent) { functionFromComponent(777); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="example-wrapper"></div> <button id="regularButton" onclick="buttonClicked()">Regular button</button>