如果你尝试使用 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 按钮时,它会将“这是从父组件到子组件的数据”存储在数据变量中。

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

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

<Child parentToChild={data}/>
Parent.js

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

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

接下来,是时候捕获子组件中的数据了。这非常简单。

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

示例 1:如果你使用的是函数组件,只需在参数中捕获 parentToChild。

import React from 'react'

export default function Child({parentToChild}) {
    return (
        <div>
            {parentToChild}
        </div>
    )
}
React 函数组件

示例 2:如果你有一个类组件,那么就使用 this.props.parentToChild

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
        return (
            <div>
                {this.props.parentToChild}
            </div>
        )
    }
}
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 的全部代码。

How to Pass Data Between a Child Component and a Parent Component

This one is somewhat trickier.

First, you need to create a function in the parent component called  childToParent and an empty state named data.

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

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

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

const childToParent = () => {
   
}
父组件

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

<Child childToParent={childToParent}/>
将 childToParent 传递给子组件

现在,在我们的子组件中,接受这个函数调用作为 props 并将其分配给 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 钩子设置数据。

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 按钮时,子数据将覆盖父数据。

现在,你可以像专业人士一样将数据从 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>
    )
}
子组件

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

如果你想做更多实验,可以在 GitHub 上找到代码

祝你学习愉快!


原文:How to Pass Data and Events Between Components in React,作者:Nishant Kumar