Можно ли изменить состояние компонента вне приложения React?

Question

Для простого приложения React:

// App.js
import React, { useState } from 'react';

const App = () => {
  const [name, setName] = useState('hello'); // state
  return <div>{name}</div>;
};
export default App;

// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

window.changeNameTo = ? // a method

Затем в консоли я могу запустить changeNameTo('world'), чтобы изменить состояние (не только html или DOM), возможно ли это?

Обновление

На самом деле у меня есть два приложения React (устаревшие, также не маленькие), которые монтируются в разные div на одной странице, поэтому существует требование, что нажатие кнопки в одном приложении может вызвать изменение на другой. Поскольку это не стоит рефакторинга и консолидации их для небольшого требования, решение взлома является приемлемым и предпочтительным. С моей точки зрения, я бы написал клиент-делегат (возможно, использовал бы window в качестве промежуточного места), чтобы соединить связь.

Answer 1

Только для отладки - Когда вам нужна функция вне компонента, вы можете заключить ее в функцию стрелки и console.log(). В Chrome вы можете затем щелкнуть правой кнопкой мыши функцию на консоли и выбрать «Сохранить как глобальную переменную», и она будет сохранена как tempX (1, если это 1-й). Теперь вы можете использовать его из консоли.

Это лучше, чем добавление функций к объекту window, так как линтеры будут предупреждать вас о console.log() при сборке для производства.

In фрагмент, сначала вам нужно выбрать правильный iframe (нажмите top в chrome).

const { useState } = React;

const App = () => {
  const [name, setName] = useState('hello'); // state
  
  console.log((...args) => setName(...args));
  
  return <div>{name}</div>;
};

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 2

Я не проверял это, но я думаю, что вы можете назначить функцию setName свойству объекта окна. И звоните как window.setName в любом месте кода

Answer 3

Технически вы можете, но вы должны быть очень осторожны, когда делаете такие вещи. Посмотрите на пример здесь:

https://codesandbox.io/s/sweet-gareth-9owzq?file= / src / index. js

Попробуйте использовать консоль и вызовите ChangeName("[YourWantedStr]");

Просто чтобы прояснить - ваш вопрос был, если это возможно. Да, это так. Но вы не должны этого делать, если вам нужно изменить свое состояние таким образом, что вы, вероятно, использовали плохую архитектуру при создании приложения.