反應，在兄弟組件之間傳遞狀態

我正在研究一個簡單的 ShoppinList。我有兩個組件，Form.js和List.j. 如何在List.js存盤在list陣列中的專案中顯示Form.js？我不想useState被寫入App.js，但會在其自己的組件中保持邏輯分離。

應用程式.js：

//Imporing Components
import Form from "./Components/Form";
import List from "./Components/List";

function App() {
  return (
      <div className="App">
          <header>
              <h1>Shopping List</h1>
          </header>
          <Form/>
          <List/>
      </div>
  )
}

表單.js：

/*Create a Component*/
const Form = () => {

    const [inputText,setInputText] = useState("")
    const [list,setList] = useState([])

    const submitBtn = (e) =>{
         e.preventDefault()  /*kein refresh t?tigen*/
        setList([
            ...list,{inputText}
        ])
    }

    /*Funktion*/
    /*const inputTextHandler =  (e) => {
        setInputText(e.target.value)
    }*/

    return (
        <form>
            <input
                value={inputText}
                type="text"
                onChange={
                    (e) => setInputText(e.target.value)
                }
            />
            <button type="submit" onClick={submitBtn}>
                <i>Add</i>
            </button>
        </form>
    )
}
export default Form

串列.js：

import React, {useState} from "react";

const List = () =>{
    return(
        <div>
            <ul>{[List]}</ul>
        </div>
    )
}
export default List

uj5u.com熱心網友回復：

在 React 狀態下，從上到下。如果在父組件中定義的函式已作為道具傳遞給嵌套組件，則嵌套組件可以更新父組件的狀態。這意味著，您想做的事情是不可能的，因為您想在兄弟組件（List.js和Form.js）之間傳遞狀態。

為此，您應該在父組件中擁有串列的狀態，App.js例如。

import Form from "./Components/Form";
import List from "./Components/List";
import {useState} from "react";


function App() {
  const [list, setList] = useState([])
  return (

      <div className="App">
          <header>
              <h1>Shopping List</h1>
          </header>
          <Form list = {list} setList = {setList}/>
          <List list = {list} />
      </div>
  )
}

import React, {useState} from "react";

const List = ({list}) =>{

    return(
        <div>
            <ul>{list.map(item => <li>"test"</li>)}</ul>
        </div>
    )
}

export default List

const Form = ({list, setList}) => {
    const [inputText,setInputText] = useState("")

    const submitBtn = (e) =>{
         e.preventDefault()  /*kein refresh t?tigen*/
        setList([
            ...list,{inputText}
        ])
    }

    /*Funktion*/
/*    const inputTextHandler =  (e) => {
        setInputText(e.target.value)
    }*/

    return (
        <form>
            <input
                value={inputText}
                type="text"
                onChange={
                    (e) => setInputText(e.target.value)
                }
            />
            <button type="submit" onClick={submitBtn}>
                <i>Add</i>
            </button>
        </form>
    )
}

export default Form

uj5u.com熱心網友回復：

如果不將道具傳遞給父組件，則不能將道具傳遞給兄弟組件。另一種方法是使用狀態管理器，例如 Redux、Effector 或至少 React Context。

React 的作業方式：

import Form from "./Components/Form";
import List from "./Components/List";


function App() {
    const [list, setList] = useState([]);


    const formSubmitHandler = (passedData) => {
        setList(passedData);
    }

    return (
         <div className="App">
             <Form onSubmitting={formSubmitHandler}/>
             <List list={list}/>
         </div>
    )
}

uj5u.com熱心網友回復：

你不能真正按照你的要求去做，因為 React 只允許子組件接受來自父組件的狀態，這是一個自上而下的程序。我建議使用 React “背景關系”；背景關系將允許您擁有一個組件，該組件可以在整個組件樹中共享狀態，而無需通過子組件向下傳遞道具。它基本上是整個 react 應用程式的商店，可以隨時隨地拉取。

https://reactjs.org/docs/context.html

標籤：javascript 反应

上一篇：如何過濾陣列物件中的陣列？

下一篇：通過onClick（TypeScript）單擊功能組件時設定反應狀態