将数组从子传递给父 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}/>
</>
)
}