如何從 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;