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

Question

我正在研究一個簡單的 ShoppinList。 我有兩個組件， Form.js和List.j 。 如何在List.js中顯示存儲在Form.js的list數組中的項目？ 我不希望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

Answer 1

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

為此，您應該將 state 用於父組件中的列表，例如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()  
        setList([
            ...list,{inputText}
        ])
    }

    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

Answer 2

如果不將道具傳遞給父組件，則不能將道具傳遞給兄弟組件。 另一種方法是使用 state 管理器，例如 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>
    )
}

Answer 3

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

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