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

在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

import React, { Component } from 'react'

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

export default Name

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

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

import React, { Component } from 'react'

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

从“/Name”导入名称；
从“React”导入React，{Component}
导出类应用程序扩展组件{
状态={
名称：“塔伦”
}
render（）{
返回(
)
}
}
导出默认应用程序

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

import React, { Component } from 'react'

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

export default Name

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

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

import React, { Component } from 'react'

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

import React，{Component}来自“React”
导出类名扩展组件{
render（）{
返回(
我的名字是：{this.props.name}
)
}
}
导出默认名称

---

但是现在，由于React引入了功能组件，如果我对

App.js

和

Name.js

都使用功能组件，那么等效代码是什么？

对于

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;

从上面的示例来看，

useState

函数是一个状态钩子，它可以帮助您在

App.jsx

功能组件中创建状态对象，对于进一步的更新，您还可以在单击事件中使用

setName

函数。从文件中：

挂钩是React 16.8中新增的一项功能。它们允许您在不编写类的情况下使用状态和其他React特性

请参考此链接

我希望这有帮助

使用你可以写这样的东西

在

应用程序中

：

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} />;
}

---

对于功能组件中的状态管理，应使用

useState

hook，如下所示：

import React，{useState}来自“React”；
导出默认函数App（）{
const[name，setName]=useState（“Tarun”）；
返回(
);
}
//名字
导出默认函数名（道具）{
返回(
我的名字是：{props.name}
);
}

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

import React, { Component } from 'react'

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

export default Name

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

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

import React, { Component } from 'react'

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

从“/Name”导入名称；
从“React”导入React，{useState}
导出函数App（）{
const[name，setName]=“Tarun”；
返回；
}

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

import React, { Component } from 'react'

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

export default Name

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

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

import React, { Component } from 'react'

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

import React，{Component}来自“React”
导出函数名（{Name}）{
返回我的名字是：{name}
}

---

好了。

如果在

React.StrictMode

中使用React v17+和TypeScript功能组件，则：

1）父母对子女

1.1）父组件，例如App.tsx

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

由于可重用性，我已将

仪表板道具

移动到一个新文件中

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

2.1）家长，例如应用程序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>
  );
}

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;

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

---

我如何定义应用程序函数中的状态？@TarunKhare刚刚更新了我关于函数组件中状态的回答。如果有什么不清楚，请告诉我，谢谢！是否可以将数据从子级（函数组件）传递到父级（类组件）？