将 React 中的道具从一个文件传递到另一个文件

Question

在下面的代码中，我想将名称从 Person.js 传递给 App.js 作为 prop。但我不明白该怎么做。如果可以，请解释一下该怎么做。

应用程序.js

import { useState,useEffect } from 'react';

// import Person from './Person'

function App(props) {

  const [greet, setGreeet] = useState("");

  return (

    <div className="App">

      <h1> Good {greet} </h1>

    </div>

  );

}

export default App;

Person.js

import React from 'react';

import App from './App'

export default function Person (){

    const name="Jenifer"

    return(

        <div></div>

    );

}

Answer 1

我认为您是在询问如何将数据从孩子传递给父母。您必须将一个方法从 App 传递给 Person。并从 Person 组件调用该方法。function Person (props){  const {setNameToApp} = props;  const name = "Jennifer";   // this useEffect is called when the component mounts for the first time React.useEffect(()=>{   setNameToApp(name); },[])  // I have also shown how to use button to change the greet state in the app.  return (<div> <button onClick={()=>{setNameToApp("name when I pressbutton")}}> Set Name </button> </div>)}function App(props) {  const [greet, setGreet] = React.useState(""); // pass setGreet function to components which can call this and change the state of the greet   return (    <div>      <h1> Good  {greet} </h1>      <Person  setNameToApp = {setGreet} />     </div>  );}

Answer 2

将名称作为道具从 person.js（父组件）传递到 App.js（子组件）Person.jsimport React from 'react';import App from './App'export default function Person (){    const name="Jenifer"    return(        <div>        <App name={name}/>        </div>    );}应用程序.jsimport { useState,useEffect } from 'react';// import Person from './Person'function App(props) {const [greet, setGreeet] = useState("");  return (    <div className="App">      <h1> Good Morning {props.name} </h1> // Good Morning Jenifer    </div>  );}export default App;

Answer 3

最后我找到了原因。发生这种情况是因为我试图将数据从我的子类传递到父类。这样做是不可能的。