在反應中 - 將數組從子組件更新為父組件

Question

我試圖從子組件向父級中的數組添加數字。 當我嘗試僅根據隨機數發送數據時，這些數字似乎很混亂。 （我試圖建立的游戲是 Lights Out）

家長：

 import "./App.css"; import Square from "./Square"; import react, { Component } from "react"; class App extends Component { constructor(props) { super(props); this.state = { lightNums: [], }; } showNum(n) { this.setState((st) => ({ lightNums: [...st.lightNums, n], })); } arr = Array.from({ length: 25 }).map((e, g) => { return <Square num={g} key={g} showNum={this.showNum.bind(this)} />; }); render() { return <div className="App">{this.arr}</div>; } } export default App;

而孩子：

 import react, { Component } from "react"; import "./Square.css"; class Square extends Component { constructor(props) { super(props); this.clickHandler = this.clickHandler.bind(this); this.state = { clicked: this.rand(this.props.num), }; } clickHandler(e) { this.props.showNum(this.props.num); this.setState((st) => ({ clicked: st.clicked ? false : true })); } rand = (num) => { const rand = Math.floor(Math.random() * 2); if (rand === 1) { this.props.showNum(num); return true; } else { return false; } }; classN = () => `square ${this.state.clicked ? "clicked" : ""}`; render() { return ( <div className={this.classN()} onClick={this.clickHandler}> {this.props.num} </div> ); } } export default Square;

（如果隨機數為 1 ，則在將數字添加到數組的父級上運行該函數）並且您可以看到，當我運行它時，該數組不是基於真假，它只是添加數字：（應該是僅顯示陣列中的淺色..)

chrome 中問題的圖像

Answer 1

您將在父級中創建一個addNumber方法，並將其作為道具傳遞給子級。 與孩子交互的用戶調用addNumber ，將新值推送給父級。

與基於類的遺留組件相比，基於函數的組件是完成所有這些工作的更好方法。

Answer 2

您可以將parent組件的方法作為道具傳遞給child組件。

這里簡單的例子：

 const { useState, useCallback } = React; function Child({ onChange }) { return <input type="text" onChange={(e) => onChange(e.target.value)} />; } function App() { const [name, setName] = React.useState(""); const handleClick = useCallback((e) => { setName(e); }, []); return ( <div> <div>{name}</div> <Child onChange={handleClick} /> </div> ); } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>