在 React 中如何在组件之间传递数据和事件

如果你尝试使用 API​​ 端点实现 CRUD 操作,你可能会发现很难管理多个组件的数据。

或者,也许你有模态,但是你想从其他组件触发它。

在本教程中,我将向你展示如何做到这一点。

如何在父组件和子组件之间传递数据

首先,让我们在父组件和子组件之间传递数据。

你需要创建两个组件,一个父组件和一个子组件。

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Child.js

接下来,你将在父组件中导入子组件并返回它。

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

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

在父组件中调用子组件

然后,你将创建一个函数和一个按钮来触发该函数。此外,你将使用 useState Hook 创建一个状态来管理数据。

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

正如你在此处看到的,我们在 Click Parent 按钮单击时调用 parentToChild 函数。单击 Click Parent 按钮时,它将 “This is data from Parent Component to the Child Component” 存储在数据变量中。

现在,让我们将该数据状态传递给我们的子组件。你可以使用 props 来做到这一点。

当你像这样调用子组件时,将数据作为 props 传递:

<Child parentToChild={data}/>

Parent.js

在这里,我们将子组件中的数据作为 data 传递。

data 是我们必须传递的数据,而 parentToChild 是 prop 的名称。

接下来,是时候在子组件中获取数据了。这很简单。

在这里,可能有两种情况。

案例一:如果你使用的是函数式组件,只需在参数中捕获 parentToChild 即可。

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}

React 函数组件

案例二:如果你有一个类组件,那么只需使用 this.props.parentToChild

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}

React 类组件

无论哪种方式,你都会得到相同的结果:

在 React 中如何在组件之间传递数据和事件

当我们单击 Click Parent 按钮时,我们将在屏幕上看到数据作为输出。

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child parentToChild={data}/>
      
      <div className="child">
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

你将在上面看到 Parent Component 的完整代码。

如何在子组件和父组件之间传递数据

这个有点棘手。

首先,你需要在父组件中创建一个名为 childToParent 的函数和一个名为 data 的空状态。

const [data, setData] = useState('');

const childToParent = () => {
   
}

父组件

然后,将 childToParent 函数作为 prop 传递给子组件。

<Child childToParent={childToParent}/>

传递 childToParent 给子组件

现在,在我们的子组件中,接受此函数调用作为 prop 并将其分配给 onClick 事件。

此外,声明一个状态,其中包含一些字符串或数字形式的数据。

将数据作为参数传递给 parentToChild 函数。

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    const data = "This is data from Child Component to the Parent Component."
    return (
        <div>
            <Button primary onClick={() => childToParent(data)}>Click Child</Button>
        </div>
    )
}

子组件

接下来,在父组件中,在 childToParent 函数中接受此数据作为参数,然后使用 useState hook 设置数据。

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

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

export default Parent;

父组件

接下来,在返回函数中显示该数据变量。

import './App.css';
import { useState } from 'react';
import Child from './Child';

function Parent() {
  const [data, setData] = useState('');
  
  const childToParent = (childdata) => {
    setData(childdata);
  }

  return (
    <div className="App">
     {data}
      <div>
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

父组件

单击 Click Child 按钮时,子数据将覆盖父数据。

在 React 中如何在组件之间传递数据和事件

现在,你可以像专业人士一样将数据从 Child 传递给 Parent 和从 Parent 传递给 Child

你还可以传递 onClick 或 OnChange 等事件

只需在 childToParent 函数中调用 alert 方法并将该函数作为 prop 传递给子组件。

import './App.css';
import Child from './Child';

function Parent() {
  const childToParent = () => {
    alert("This is an alert from the Child Component")
  }

  return (
    <div className="App">
      <div className="child">
        <Child childToParent={childToParent}/>
      </div>
    </div>
  );
}

export default Parent;

父组件

子组件中,接受 childToParent 函数作为 prop,然后将其分配给按钮上的 onClick 事件。

import React from 'react'
import { Button } from 'semantic-ui-react';

export default function Child({childToParent}) {
    return (
        <div>
            <Button primary onClick={() => childToParent()}>Click Child</Button>
        </div>
    )
}

子组件

当你单击子组件中的按钮时,将调用父组件中的函数,你将看到以下警报:

在 React 中如何在组件之间传递数据和事件

就是这些啦!