Question

我正在研究React项目，因为我试图将数组从子组件传递到父组件。但是我不知道如何通过

这是父级组件

import React from 'react';
import Child from './Child/Child'

function App() {
  return(
    <div className='App'>
      <Child></Child>
    </div>
  )
}

export default App

这是子组件

import React from 'react';

function Child() {
  const employees = ['Williams','Steve']
  return(
    <div className='Child'>
    </div>
  )
}

export default Child

````

Answer 1

如果要将某些内容传递给父组件，最简单的方法是在Parent组件中使用的Child组件中创建回调。

Pass props to parent component in React.js

Answer 2

在父级中定义一个处理数组的方法：

import React from 'react';
import Child from './Child/Child'

function App() {
  const doSomething = (inputArray: string[]) => {
    // Do something with your array of strings in here
  };

  return (
    <div className='App'>
      <Child doSomethingMethod={this.doSomething}></Child>
    </div>
  );
}

export default App;

然后您可以在孩子中使用它：

import React from 'react';

function Child() {
  const employees = ['Williams','Steve'];
  const doingSomething = () => {
    // blah blah
    // this method is an example where it takes the employees array as a fixed
    // array predefined elsewhere (above)
    this.props.doSomethingMethod(employees);
  };

  const doSomethingElse = (inputArray: string[]) => {
    // this method takes arguments then pushes them into the method to pass
    // to the parent
    this.props.doSomethingMethod(inputArray);
  };

  return (
    <div className='Child'></div>
  );
}

export default Child

Answer 3

您可以在此处使用钩子。

在父组件中初始化useState挂钩，然后将set方法作为prop传递给子组件。

然后在子组件中，您可以使用set方法将新的数组值分配给父组件。

例如：

在父级中：

    import React, {useState} from 'react';
    import Child from './Child/Child'

    function App() {
      const [arr, setArr] = useState([]);
      return(
        <div className='App'>
          <Child setArrFunc={setArr}></Child>
        </div>
      )
    }

export default App

在子组件中：

import React, {useEffect} from 'react';

function Child({setArrFunc}) {

  const employees = ['Williams','Steve']
  useEffect(()=> {
 setArrFunc(employees);
},[]);
  return(
    <div className='Child'>
    </div>
  )
}
export default Child;

//或者您可以利用onClick函数并利用clickHandle方法中的setArrFunc

如何在反应中将数组从子组件传递到父组件我知道如何从父t传递

3 个答案: