如何在 React 中的功能组件之间传递数据？

Question

在 React 中，我们可以通过以下方式使用状态和道具在基于类的组件之间传递数据：

应用程序.js

import Name from './Name';
import React, { Component } from 'react'


export class App extends Component {
  state = {
    name: "Tarun"
  }

  render() {
    return (
      <Name name={this.state.name}/>        
    )
  }
}

export default App

名称.js

import React, { Component } from 'react'

export class Name extends Component {
    render() {
        return (
            <div>
                My name is : {this.props.name}
            </div>
        )
    }
}

export default Name

但是现在既然 React 引入了函数式组件，如果我对App.js和都使用函数式组件，那么等效的代码是什么Name.js？

Answer 1

使用钩子你可以写出这样的东西。

在App：

import React, { useState } from 'react'

export default function App() {

  // `useState` returns an array with the state
  // and the method used to update the state
  // You can initialise the state with a variable/object
  const [name, setName] = useState('Tarun');

  // No need for a render method
  // Just return the JSX from the function
  return <Name name={name} />;
}

在Name：

import React from 'react'

// Props are passed down like normal function args
// Destructure `names` from the props object
export default function Name({ name }) {
  return <div>My name is: {name}</div>;
}

Answer 2

如果您将React v17+与TypeScript和功能组件一起使用React.StrictMode，那么：

1) 父母对孩子

1.1) 父组件，例如App.tsx

import Dashboard from "./components/Dashboard/Dashboard";
export default function App() {
  return <Dashboard title="My Dashboard"></Dashboard>;
}

1.2) 子组件，例如仪表板

// src/components/Dashboard/Dashboard.tsx

import React from "react";

type DashboardProps = {
  title: string;
};

const Dashboard: React.FC<DashboardProps> = (props) => (
  <div>Dashboard Component {props.title}</div>
);

export default Dashboard;

这与上面相同（摘录）：

//..
export default function Dashboard(props: DashboardProps) {
  return <div>Dashboard Component {props.title}</div>;
}

延迟加载

如果你想使用“Lazy-Loading”，你必须稍微改变仪表板组件或者使用类似Dashboard.lazy.tsx的：

import React, { lazy, Suspense } from 'react';
import { DashboardProps } from '../../Types';
const LazyDashboard = lazy(() => import('./Dashboard'));

const Dashboard = (props: DashboardProps) => (
  <Suspense fallback={null}>
    <LazyDashboard {...props} />
  </Suspense>
);

export default Dashboard;

DashboardProps由于可重用性，我已将其移至新文件中。

// Types/index.tsx
export type DashboardProps = {
  title: string;
};

2）子级到父级（这次使用 React.useState 钩子）

2.1) 父级，例如App.tsx

import Dashboard from "./components/Dashboard/Dashboard";
export default function App() {
  const [messageFromChild, getMessageFromChild] = React.useState(
    "Dad is waiting"
  );

  const sendDataToParent = (message: string) => {
    getMessageFromChild(message);
  };
  return (
    <div>
      <Dashboard
        props={{ title: "My Dear Dashboard" }}
        sendDataToParent={sendDataToParent}
      ></Dashboard>
      <div>
        <strong>From Child to Parent:</strong> {messageFromChild}
      </div>
    </div>
  );
}

2.2) 子级，例如 Dashboard.tsx

import React from "react";
import { DashboardProps } from "../../Types";

const Dashboard: React.FC<DashboardProps> = ({ props, sendDataToParent }) => (
  <div>
    <strong>From Parent to Child:</strong> {props.title}
    &nbsp;
    <button
      onClick={() => {
        sendDataToParent("Hi Dad");
      }}
    >
      Send to Parent
    </button>
  </div>
);

export default Dashboard;

2.3) 类型，例如 Types/index.tsx

export type DashboardProps = {
  props: {
    title: string;
  };
  sendDataToParent: (message: string) => void;
};

Answer 3

因为Name.jsx你可以执行如下操作：

\n\n

import React from \'react\';\n\n// additionally you can do destructuring with props like this:\n// const Name = ({name}) => {\nconst Name = (props) => {\n    return (\n        <div>\n            My name is : {props.name}\n        </div>\n    );\n}\n\nexport default Name;\n

\n\n

传递props发生在功能组件创建时，就像上面一样。正如 React 文档所述：

\n\n

\n

此函数是一个有效的 React 组件，因为它接受单个 \xe2\x80\x9cprops\xe2\x80\x9d （代表属性）对象参数和数据并返回一个 React 元素。我们将此类组件称为 \xe2\x80\x9cfunction 组件\xe2\x80\x9d，因为它们实际上是 JavaScript 函数。

\n

\n\n

您可以在此处进一步阅读：函数和类组件

\n\n

让App.jsx我建议以下示例：

\n\n

import Name from \'./Name\';\nimport React, { useState } from \'react\';\n\nconst App = () => {\n    const [name, setName] = useState(\'Tarun\');\n\n    return (\n        <Name name={name}/>        \n    )\n}\n\nexport default App;\n

\n\n

在上面的示例中，useState函数是状态钩子，它可以帮助您在App.jsx功能组件中创建状态对象，并且为了进一步更新，您可以setName另外使用该函数，例如在单击事件上。从文档中：

\n\n

\n

Hooks 是 React 16.8 中的新增功能。它们让您无需编写类即可使用状态和其他 React 功能。

\n

\n\n

请参阅此链接使用状态挂钩。

\n\n

我希望这有帮助！

\n