如何将道具从一个组件传递到另一个组件？

Question

我需要将一个名为名称的Prop从一个反应组件传递到另一个反应组件，但是出了问题。你能告诉我怎么做正确的吗？

提前致谢

import React from 'react';

export class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello World and {this.props.name}</h1>
    )
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name='Alex' />;
      <h2> Welcome, {Greetings.props.name} </h2>
    </div>
  );
}

export default App;

Answer 1

两件事：

1. 看起来您正在混合班级和功能性组件，我建议现在更常见的是功能。在这种情况下，问候看起来像这样：

export function Greeting(props) {
  return (
    <h1>Hello World and {props.name}</h1>
  )
}

2. 您正在传递组件的道具，但是您无法从父母那里访问它。您可以为此创建另一个变量：

const greetingName = "Alex";

function App() {
  return (
    <div>
      <Greeting name={greetingName} />;
      <h2> Welcome, {greetingName} </h2>
    </div>
  );
}

Answer 2

在engreting.js中，您错过了参数

app.js

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

const App = () => {
  const [name, setName] = useState("")
  return (
    <div>
      <Greeting name="Alex" />
    </div>
  )
}

export default App

engreting.js

import React from 'react'

const Greeting = (props) => {
    return (
        <div>
            <h1>Hello World and My name is {props.name}</h1>
        </div>
    )
}

export default Greeting