如何将这个基于钩子的代码转换为基于 class 的代码？可能吗？

Question

如何将此基于钩子的代码转换为基于 class 的代码？代码还能用吗？我正在使用 react/ASP.net Core 模板。我的项目由几个兄弟组件组成。我正在尝试将一个状态从一个组件发送到另一个组件。

import { useState } from "react";

//the change is reflected in the ImageEditor component
const ImageEditor = ({ yourState }) => (
  <p>State in the ImageEditor = {yourState}</p>
);

//ImageTile changes the state through the setYourState method
const ImageTile = ({ yourState, setYourState }) => (
  <button onClick={() => setYourState("World!")}>
    Change State from the ImageTile
  </button>
);

//App is the parent component and contains both image editor and tile
const App = () => {
  //the state which holds the image ID is declared in the parent
  const [imageId, setImageId] = useState("Hello");
  return (
    <div>
      <ImageTile yourState={imageId} setYourState={setImageId} />
      <ImageEditor yourState={imageId} />
    </div>
  );
};

export default App;

您可以在以下位置查看完整代码：

https://codesandbox.io/s/billowing-brook-9y9y5?file=/src/App.js:0-775

Answer 1

A parent 通过 props 将其状态传递给 child。 child 不允许更改其 parents 状态，如果 child 想要更改 parents 状态，则 parent 将回调传递给child 即 child 可以调用来改变状态。这是反应状态管理的基础。 child 不需要知道 parent 如何存储它的状态（class 实例、挂钩实例或状态库）。

如果您的应用程序使用像 redux 这样的全局状态管理器，那么全局状态将映射到 props 并且可以调用存储操作来更新全局状态。在这种情况下，child 不需要知道还有谁在使用该状态，因为它是全局的。

class Foo extends Component {
  constructor (props) {
    super(props);
    this.state = { myState: 0 };
    this.setMyState = this.setMyState.bind(this);
  }

  setMyState (value) {
    this.setState({
      myState: value
    });
  }

  render () {
    return (
      <MyChildCompoent myStat={this.state.myState} setMyState={this.setMyState} />
    );
  }
}

Answer 2

您需要在父级中声明状态：

state = {
  someKey: '',
};

然后在父级中，定义一些函数来更新它：

updateSomeKey = (newValue) => {
  this.setState({ someKey: newValue });
}

然后将这两个值作为 props 传递给您的同级组件：

render() {
  return (
    <div>
      <Sib1 someKey={this.state.someKey} updateSomeKey={this.updateSomeKey} />
      <Sib2 someKey={this.state.someKey} updateSomeKey={this.updateSomeKey} />
    </div>
  )
}

您不需要更新 'shared' 状态。在上面的代码中，可以通过调用 updateSomeKey 函数在任一组件中更新 someKey 状态，该函数也可作为 prop 使用。如果任一组件调用该函数 (this.props.updateSomeKey('hello!'))，更新后的状态将传播到两个组件。

如何将这个基于钩子的代码转换为基于 class 的代码？可能吗？

How can I convert this hook based code to class based code? is it possible?

javascript

setstate

reactjs