时间戳

首页 > 解决方案 > 访问组件状态

javascript - 访问组件状态

问题描述

我有这段代码，我想访问Die组件的状态。我该怎么做？

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

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>
    );
}

标签： javascriptreactjsjsx

解决方案

在您的情况下，您可以使用 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>
  );
}

推荐阅读