將數組從子傳遞給父 ReactJS

Question

我在組件中有一個數組，我想將其導出或傳遞給其他組件（父組件）

子組件：

export default function child(){

const arr = ["1020","52214","3325"]
return (
<div> child</div>
)
}

家長：

export default function parent(){

return (
<>
<div> parrent</div>
<child/>
</>
)
}

Answer 1

您不能將數據從孩子傳遞給父母。

你可以這樣通過。

const ParentPage = () => {

  const [arr , setArr ] = useState([])
  console.log(arr)  // [1,2,3]

  return (
    <ChildPage setArr={setArr} />
  );
}

const ChildPage = ({setArr}) => {
    return (
        <button onClick={()=> setArr([1,2,3]) }}> </button>
    );
}

或者您可以使用redux

Answer 2

在反應中，我們不會將值從孩子傳遞給父母，而是反過來：這是一個單向數據流！

您可以使用State 在父級中創建有狀態值和集合函數，將set useState傳遞給子級並允許其設置值。

例子：

export default function child(props){

const arr = ["1020","52214","3325"];
props.setMyArray(arr);

return (
<div> child</div>
)
} 

---

import { useState } from 'react';

export default function parent(){
  const [myArray, setArray] = useState([]);

  return (
    <>
    <div> parrent</div>
    <child setMyArray={setArray}/>
    </>
    )
  }
}

Answer 3

您可以使用道具在父元素中調用 function 並從子元素中傳遞 function 中的參數。

這是一個例子：

子元素：

export default function child(props){

const [arr,setarr]= useState(["1020","52214","3325"]);

return (
<div onclick={()=>{props.func(arr)}}> child</div>
)
}

父元素：

export default function parent(){
 
function passvalue(arr){
   const passedvalue = arr; 
}


return (
<>
<div> parrent</div>
<child func={passvalue}/>
</>
)
}