找到正确的组件来保持你的状态很重要。在这里，您想将您的模式移动到父组件状态，并从子组件作为props访问它。

我看到您的子组件正在设置模式，这有点棘手，因为它现在将保持在父状态，那么该怎么做呢？

您在父级中创建一个回调，并在父级渲染中调用组件时将该回调设置为 prop。

然后，您需要在每个图像元素上设置 onClick 事件处理程序，以调用子组件中的事件处理程序（在本例中为 handleClick）。

然后这个事件处理程序将获取目标元素的 id 并使用 this.props.onUpdateMode（我们作为 props 传递的回调）将它传递给父元素。

父回调从子回调接收数据，并相应地更新状态。

参考：提升状态

import React, {Component} from 'react';
import './App.css';
import IconBar from './components/icon-bar';
import Events from './components/events';

class App() extends Component {
  constructor(props) {
        super(props)
        this.state = {
            mode: null
        }
        this.updateMode = this.updateMode.bind(this);
    }

  updateMode = (newMode) => {

      this.setState({mode: newMode});
  }


  return (
    <div className="App">
      <h1 className="Title">ENAKS</h1>
      <IconBar onUpdateMode={this.updateMode}  mode={this.state.mode} />
      <Events />
  <div className="mainModeFrame"><p1>{this.state.mode}</p1></div>
    </div>
  );
}

export default App;

import React, {Component} from 'react';
import '../App.css';

class IconBar extends Component {
    constructor(props) {
        super(props)

        this.handleClick=this.handleClick.bind(this);
    }

    handleClick(e) {

      let mode = e.target.id;
      this.props.onUpdateMode(mode);

    }


    render() {
        return(
                <div className="icon-bar">
                <div className="iconHolder">
                <img src="/images/2dlogo.png" id="2d" alt="" className="icons" onClick={this.handleClick} />
                <img src="/images/3dlogo.png" id="3d" alt="" className="icons" onClick={this.handleClick}/>
                <img src="/images/flag.png" id="edit" alt="" className="icons" onClick={this.handleClick}/>
                <img src="/images/tracker.png" id="track" alt="" className="icons" onClick={this.handleClick}/>
        <div>{this.props.mode}</div>
                </div>
         </div>
              )
    }
}


export default IconBar;

有两种方法可以做到这一点。

第一个是使用类似 redux 的东西。您可以在其中拥有可以在不同组件之间共享的状态的全局存储。

第二个是在父组件中发出状态。这里图标栏应该是你的父组件的子组件app.js。从父组件传递函数作为props，该函数应该接受一个可以是 state 的参数

图标栏下方现在需要props（请参阅构造函数和超级）

import React, {Component} from 'react';
import '../App.css';

class IconBar extends Component {
    constructor(props) { // 
        super(props)
        this.state = {
            mode: 'Hi'
        }
    }
    render() {
        return(
                <div className="icon-bar">
                <div className="iconHolder">
                <img src="/images/2dlogo.png" alt="" className="icons" onClick={() => this.setState({mode: '2d'})}/>
                <img src="/images/3dlogo.png" alt="" className="icons" onClick={() => this.setState({mode: '3d'})}/>
                <img src="/images/flag.png" alt="" className="icons" onClick={() => this.setState({mode: 'edit'})}/>
                <img src="/images/tracker.png" alt="" className="icons" onClick={() => this.setState({mode: 'track'})}/>
        <div>{this.state.mode}</div>
                </div>
         </div>
              )
    }
}


export default IconBar;

然后在 app.js

import React, {Component} from 'react';
import './App.css';
import IconBar from './components/icon-bar';
import Events from './components/events';

function App() {
   const getStateFromChild = state => {
  // body of function 
  // return something 
  }

  return (
    <div className="App">
      <h1 className="Title">ENAKS</h1>
      <IconBar  upsideEmit={getStateFromChild} />
      <Events />
  <div className="mainModeFrame"><p1>{this.state.mode}</p1></div>
    </div>
  );
}

export default App;

您希望状态何时发送到父组件取决于您。

[更新：]我在我的一个开源 repo 中做了一些非常相似的事情。而不是浏览整个代码，看看这一行

这里我有一个父组件，其中我有子组件 Checkboxes

<CheckBoxes 
  options={options}
  upsideEmit={onChangeHandler}
  defaultColor={defaultColor}
  />

CheckBoxes 被传递一个函数 onChangeHandler upsideEmit={onChangeHandler}（忽略函数体）

const onChangeHandler =  (data, errorMessage=null) => {
    // Error Message is usually passed from the child components (look ad date componenet example )
    if (!errorMessage && (data === '' || data)) { // Doing data = "" in case someone want to remove last char of a string
      const currentData = {...payload}
      currentData[key] = data
      setPayloadData(currentData)
    } else if (errorMessage) {
      setErrorData({status: true, message: errorMessage})
    }
    return
  }

现在，如果您查看复选框组件中的这一行，我会将我的子状态传递给父组件

  const toggleState = (index) => {
    let copyState = [...state]
    const previousState = copyState[index]['value']
    if (multipleSelect) {
      // Setting all other values as false, since the array for checkbox won't in normal scenario be big, we can just itterate and set it to false
      copyState = copyState.map(element => {
        element.value = false
        return element
      })
    } 
    copyState[index]['value'] = !previousState 
    setState(copyState)
    upsideEmit(copyState)
}

如果这有帮助，请给 repo 一个 star。