如何将数据从 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>