如何从 reactjs 的另一个模块导出 State

Question

我们开始以 3 名刚开始做出反应的学生的身份开展一个项目。 我想拆分代码，这样每个人都可以同时处理一些事情。 但是，当我尝试在 App.js 中使用 icon-bar.js 中的 state 时，我收到了错误消息。 应用程序.js

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

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

export default App;

图标栏.js

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

class IconBar extends Component {
    constructor() {
        super()
        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;

如何使用我的“模式”state 在 App.js 中更改我的 p1

Answer 1

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

第一个是使用 redux 之类的东西。 你有 state 的全局存储，可以在不同的组件之间共享。

第二个是在父组件中发出 state 。 这里的图标栏应该是父组件app.js的子组件。 从父组件中，您将 function 作为道具传递，并且 function 应该采用可能是 state 的参数

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

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;

您希望何时将 state 发送到父组件取决于您。

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

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

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

CheckBoxes 传递一个 function 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
  }

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

  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 一个星号。

Answer 2

找到正确的组件来固定您的 state 很重要。 在这里，您要将模式移动到父组件 state 并从子组件作为道具访问它。

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

在父渲染中调用组件时，您在父渲染中创建回调并将该回调设置为道具。

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

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

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

参考：起吊State向上

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;