在 React 中將狀態傳遞迴父元件
讓一個優秀的開發人員從普通人中脫穎而出的一件事是編寫乾淨、格式良好的程式碼的能力。
這是 React 功能背後的大腦，它允許編碼人員在一個元件記憶體儲資訊並執行操作，然後讓另一個元件訪問資料並使用它。這就是 React 中子元件和父元件之間的關係。
父元件或原始元件已經有要處理的操作。想要執行另一個過程來替換、更新或新增資料到父元件的編碼器建立子元件來執行此操作。
在某些情況下，開發人員可能希望將多個資料傳遞給父級。建立多個子元件也是一種理想的方法。
這將導致父元件更短更整潔，程式碼更少。
使用回撥函式將資料返回給父元件
callback 函式是一個 React 概念，它允許你在處理該函式的操作後呼叫該函式。這是將子元件中的函式呼叫回父元件的直接方法。
我們將從終端建立一個新專案開始。我們輸入 npx create-react-app illustrationone。
建立專案後，我們轉到編輯器中的資料夾，移動到 src 資料夾並建立一個新檔案 Child.js。我們將在示例中使用 App.js 和 Child.js。
我們的 App.js 將作為我們的父元件，我們將像這樣啟動 callback 函式：
程式碼片段（App.js）：
import React from 'react';
import Child from './Child'
class App extends React.Component{
state = {
name: "",
}
handleCallback = (childData) =>{
this.setState({name: childData})
}
render(){
const {name} = this.state;
return(
<div>
<Child parentCallback = {this.handleCallback}/>
{name}
</div>
)
}
}
export default App
我們首先建立 name 狀態，然後宣告將從 Child.js 元件中獲取與 name 變數對應的資料的回撥函式。
一旦我們從子元件取回資料，我們將建立一個函式，該函式將返回分配給 Child.js 中的 name 變數的資料。
接下來，我們轉到 Child.js，在這裡，我們宣告我們想要執行的操作。
程式碼片段（Child.js）：
import React from 'react'
class Child extends React.Component{
onTrigger = (event) => {
this.props.parentCallback(event.target.myname.value);
event.preventDefault();
}
render(){
return(
<div>
<form onSubmit = {this.onTrigger}>
<input type = "text"
name = "myname" placeholder = "Enter Name"/>
<br></br><br></br>
<input type = "submit" value = "Submit"/>
<br></br><br></br>
</form>
</div>
)
}
}
export default Child
輸出：
因為我們想將此資料傳遞迴父元件，所以我們需要一個函式來啟動子元件內的 callback 函式。這就是我們需要 onTrigger 事件監聽器的地方。
一旦我們點選 Submit 按鈕並顯示結果，onTrigger 立即啟用 callback 函式，將分配給 name 變數的值傳回父元件。
使用道具將狀態傳遞迴父元件
與前面的示例相比，這是一種更直接的方法。我們使用 props 將處理後的結果返回給父元件。
我們導航到 src 資料夾並建立一個新檔案 User.js。這將是我們的子元件。
App.js 是我們的父元件，我們將傳遞這些程式碼：
程式碼片段（App.js）：
import React from 'react'
import './App.css';
import User from './User'
function App() {
function getName(name) {
alert(name)
}
return (
<div className="App">
<h1>Returning State Back to Parent</h1>
<User getData={getName} />
</div>
);
}
export default App;
我們建立了一個 name 函式，它指示 React 框架我們希望它獲取分配給 name 函式的日期。然後我們想提醒它，即我們想以彈窗的形式返回。
然後我們在子元件 User.js 中新增更多程式碼：
程式碼片段（User.js）：
function User(props)
{
const name="Oluwafisayo"
return(
<div>
<h1>My Name is : </h1>
<button onClick={()=>props.getData(name)} >Click Me</button>
</div>
)
}
export default User;
輸出：
這裡我們將資料分配給 name 函式，然後一旦按下 Click me 按鈕，它就會啟用 onClick 事件偵聽器，它將資料作為 props 返回給父級。請記住，props 是屬性的縮寫。
從多個子元件向父元件傳遞資料
由於我們從兩個子元件向父元件傳遞資料，我們將為父元件建立一個檔案 TodoList.js，為子元件建立兩個檔案 Todo.js 和 DeadlineList.js。
父元件將包含程式碼，這些程式碼將定義函式以派生我們要從子元件中檢索的資料：
程式碼片段（TodoList.js）：
import React from "react";
import Todo from "./Todo";
import DeadlineList from "./DeadlineList";
const TodoList = ({ todos, toggleTodo }) =>
console.log(todos) || (
<table>
<tbody>
<tr>
<th className="taskTH">TASK</th>
<th className="deadlineTH">DEADLINE</th>
</tr>
<tr>
<td className="taskTD">
{todos.map((todo) => (
<Todo
key={todo.id}
text={todo.text}
completed={todo.completed}
toggleTodoItem={() => toggleTodo(todo.id)}
/>
))}
</td>
<td className="deadlineTd">
{" "}
{todos.map(
(todo) =>
console.log("TODO", todo) || (
<DeadlineList
key={todo.id}
value={todo.date}
completed={todo.completed}
onClick={() => toggleTodo(todo.id)}
/>
)
)}
</td>
</tr>
</tbody>
</table>
);
export default TodoList;
接下來，我們處理 Todo.js，一個表單。輸入資料後，我們單擊 Add Todo 按鈕，它會返回資料：
程式碼片段（Todo.js）：
import React, { useState } from 'react';
import wooHooSound from '../utils/wooHoo.js'
const Todo = (props) => {
const { toggleTodoItem, completed, text } = props;
let [ shouldPlaySound, setShouldPlaySound ] = useState(true);
function wooHooEverySecondClick() {
if (shouldPlaySound) {
wooHooSound.play();
setShouldPlaySound(false);
} else {
setShouldPlaySound(true);
}
}
return (
<li className="bananaLi"
onClick={() => {
toggleTodoItem();
wooHooEverySecondClick();
}}
style={{
textDecoration: completed ? 'line-through' : 'none'
}}
>
{text}
</li>
);
};
export default Todo;
然後 DeadlineList.js 負責將列表以列表格式的形式呈現給父級：
程式碼片段（DeadlineList.js）：
import React from "react";
const DeadlineList = ({ onClick, completed, value }) => {
return (
<li
className="deadlineLi"
onClick={onClick}
style={{
textDecoration: completed ? "line-through" : "none"
}}
>
{new Intl.DateTimeFormat("en-US").format(value)}
</li>
);
};
export default DeadlineList;
然後我們匯入 App.js 中的所有內容：
程式碼片段（App.js）：
import React from 'react';
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList';
import Footer from './Footer';
const App = () => (
<div className="appCSS">
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
);
export default App;
輸出：
まとめ
當開發人員作為一個團隊構建專案時，為每個元件編寫連貫的短程式碼可以很容易地從隊友那裡獲得幫助。相反，一個程式碼混亂的專案會很容易讓想要幫助的同伴望而卻步。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn