Question

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

App.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

Name.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

使用hooks，您可以编写如下内容。

在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.StrictMode 中使用 React v17+ 和 TypeScript 和功能组件，则：

1) 父对子

1.1) 父组件，例如应用程序.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>;
}

延迟加载

如果您想使用“延迟加载”，您必须稍微更改仪表板组件，或者使用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) Child to Parent（这次使用 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) 类型，例如类型/index.tsx

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

Answer 3

对于Name.jsx，您可以执行以下操作：

import React from 'react';

// additionally you can do destructuring with props like this:
// const Name = ({name}) => {
const Name = (props) => {
    return (
        <div>
            My name is : {props.name}
        </div>
    );
}

export default Name;

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

此函数是有效的React组件，因为它接受带有数据的单个“ props”（代表属性）对象参数并返回React元素。我们称这类组件为“功能组件”，因为它们实际上是JavaScript函数。

您可以在这里进一步阅读：Function and Class Components

对于App.jsx，让我提出以下示例：

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

const App = () => {
    const [name, setName] = useState('Tarun');

    return (
        <Name name={name}/>        
    )
}

export default App;

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

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

请参考此链接Using the State Hook。

我希望这会有所帮助！

Answer 4

您应该使用useState挂钩来进行功能组件中的状态管理：
从“ react”导入React，{useState}；

export default function App () {
const [name, setName] = useState("Tarun");
    return (
        <div>
             <Name name={name}/>
        </div>
    )
}


//Name
export default function Name(props) {
    return (
        <div>
            My name is : {props.name}
        </div>
    )
}

Answer 5

App.js

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

export function App(){
    const [name, setName] = "Tarun";
    return <Name name={name}>;
}

Name.js

import React, { Component } from 'react'

export function Name({name}){
   return <div>My name is : {name} </div>
}

你去了。

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

5 个答案: