设置另一个组件 state 的最佳方法

Question

有一些帖子解释了如何从另一个组件更新 state，但我仍然无法解析我的特定问题的解决方案。 我希望tableA.js组件中的提交按钮在单击时触发我的SideBar.js组件中的nextProblem() 。 这将导致 tableA.js 的tableA.js随着problemNum从1变为2发生变化，从而生成不同的表单。 由于我的设计布局，我无法将SideBar.js组件导入到我的tableA.js中！ SideBar.js还包含图像。 有任何想法吗？

我正在使用 CSS 网格来布局我的页面：

    grid-template-areas:
        "navbar navbar navbar navbar"
        "sidebar tableA ... ..."
        "sidebar tableA ... ..."
        "sidebar tableA ... ..."

我正在使用 App.js 路由到页面：

function App() {
  return (
      <Router>
        <div className="App">
          <Routes>
              <Route path={"/"} exact element={<MainPage/>}/>
              <Route path={"/gamePage"} exact element={<GamePage/>}/>
          </Routes>
        </div>
      </Router>
  );
}

export default App;

我创建了一个SideBar.js组件，该组件在顶部包含一个徽标，在底部包含一个submit按钮：

class SideBar extends Component {
    componentDidMount() {

    }
    render() {
        return (
            <div className={"sidebar"}>
                <div className={"logo_group"}>
                    <img className={"some_logo"} src={logo}/>
                </div>
                <div className={"nav_group"}>
                    <button className={"home"}/>
                    <button className={"about"}/>
                </div>
                <img className={"an_image"} src={someImage}/>
                <div className={"button_group"}>
                    <button className={"submit_button"} onClick={() => nextProblem()}>Submit</button>
                </div>
            </div>
         )
    }
}
export default SideBar

和一个带有 function nextProblem()的tableA.js组件，它更改了组件的 state：

class tableA extends Component {
    state = {
        problemNum: 1,
        problemStatus: 'unsolved',
        userAnswer: []
    };

    nextProblem = () => {
        this.setState(state => ({
            problemNum: state.problemNum + 1,
        }))
    }

    componentDidMount() {}

    render() {
        return (
            <div>
                <form>
                     ...depends on the state of the problem number
                </form>
            </div>
        )
    }

export default tableA

然后我合并GamePage.js中的所有内容：

const GamePage= () => {
    return (
        <div className={"gamepage-container"}>
            <div className={"navbar"}>
                <NavBar></NavBar>
            </div>
            <div className={"sidebar"}>
                <SideBar></SideBar>
            </div>
            <div className={"tableA"}>
                <TableA></TableA>
            </div>
            ...
        </div>
      )
}

export default GamePage

Answer 1

我可能会采用 go 让游戏页面处理 state 等的方法，然后将问题和更新 function 作为道具向下发送。 根据这件事情的发展规模，您还可以使用集中式商店。

const GamePage= () => {
    const [problem, setPropblem] = useState(0)

    return (
        <div className={"gamepage-container"}>
            <div className={"navbar"}>
                <NavBar></NavBar>
            </div>
            <div className={"sidebar"}>
                <SideBar 
                    onSetNext={() => setProblem(problem + 1)}
                ></SideBar>
            </div>
            <div className={"tableA"}>
                <TableA
                    problem={problem}
                ></TableA>
            </div>
            ...
        </div>
      )
}

export default GamePage

在您的侧边栏中，按钮变为

<button className={"submit_button"} onClick={() => this.props.onSetNext()}>Submit</button>

同样，您访问表中的 props.propblem 而不是 state 。