Доступ к состоянию компонента

Question

У меня есть этот код, и я хочу получить доступ к состояниям компонента Die. Как я могу это сделать?

РЕДАКТИРОВАТЬ: У меня есть Die класс (компонент), и я хочу получить доступ к его setImage функции состояния. Позвольте мне сказать иначе: как я могу получить доступ к ЛЮБОМУ значению дочернего компонента из родительского компонента?

function App() {
    const Roll = () => {
        console.log(dice[0].props.Die);
    };
    const dice = [<Die />, <Die />, <Die />, <Die />, <Die />];

    return (
        <div className="App">
            <div className="dice">{dice}</div>
            <button className="generate" onClick={Roll}>
                Roll
            </button>
        </div>
    );
}

Answer 1

В вашем случае вы можете использовать useRef hook https://reactjs.org/docs/hooks-reference.html#useref

базовый c пример

export default function App() {

  const dieRef = React.useRef(null);

  const Roll = () => {
    console.log(dieRef.current);
  };

  const dice = [
    <Die ref={dieRef} />,
    <Die />,
    <Die />,
    <Die />,
    <Die />
  ];

  return (
    <div className="App">
      <div className="dice">{dice}</div>
      <button className="generate" onClick={Roll}>
        Roll
      </button>
    </div>
  );
}

но для вашего примера кода должно быть что-то вроде этого

export default function App() {
  const arrOfDieRef = [
    React.useRef(null),
    React.useRef(null),
    React.useRef(null),
    React.useRef(null),
    React.useRef(null)
  ];

  const Roll = () => {
    console.log(arrOfDieRef[0].current.state);
    console.log(arrOfDieRef[1].current.state);
    console.log(arrOfDieRef[2].current.state);
    console.log(arrOfDieRef[3].current.state);
    console.log(arrOfDieRef[4].current.state);
  };

  const dice = [
    <Die ref={arrOfDieRef[0]} />,
    <Die ref={arrOfDieRef[1]} />,
    <Die ref={arrOfDieRef[2]} />,
    <Die ref={arrOfDieRef[3]} />,
    <Die ref={arrOfDieRef[4]} />
  ];

  return (
    <div className="App">
      <div className="dice">{dice}</div>
      <button className="generate" onClick={Roll}>
        Roll
      </button>
    </div>
  );
}

Answer 2

Вы можете использовать ловушки React, такие как UseContext и CreateContext, для управления состоянием и для доступа к состоянию компонента в любом месте проекта.

Вы также можете использовать Redux для управления состоянием