访问组件状态答案

【问题标题】：Access component state访问组件状态
【发布时间】：2020-04-01 10:03:22
【问题描述】：

我有这段代码，我想访问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>
    );
}

【问题讨论】：

你想从哪里访问它？
你应该使用像reduxjs这样的状态管理库
请详细说明问题，例如访问组件后要执行的操作
你不能，React 数据流被设计成瀑布，props 从父级传递到子级，并且状态只保存在本地组件中。你可以lift-state-up 但这意味着将子组件的 API 暴露给父组件，这意味着那些东西不再属于子组件了。
你可以使用useRef()钩子来引用每个< Die / >组件，然后操作这些组件的功能，检查这个问题：stackoverflow.com/questions/37949981/…

标签： javascript reactjs jsx

【解决方案1】：

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

【讨论】：

Warning: Function components cannot be given refs.

【解决方案2】：

您可以使用 React 钩子（如 UseContext 和 CreateContext）进行状态管理并在项目中的任何位置访问组件状态。

你也可以使用 Redux 进行状态管理

【讨论】：