Question

我有这段代码，并且我想访问{ ... icon: 'Logo', // then render the appropriate component based on this ... }组件的状态。我该怎么办？

编辑：我有Die类（组件），并且我想访问它的Die状态函数。让我换一种说法：如何从父组件访问子组件的 ANY 值？

setImage

Answer 1

您可以使用useRef钩子https://reactjs.org/docs/hooks-reference.html#useref

一个基本的例子是

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

您可以使用诸如UseContext和CreateContext之类的React挂钩进行状态管理，并访问项目中任何位置的组件状态。

您还可以将Redux用于状态管理

访问组件状态

2 个答案: