如何將 prop 從一個組件傳遞到另一個組件？

Question

我需要將名為 name 的道具從一個 React 組件傳遞到另一個組件，但出了點問題。 你能告訴我如何正確地做嗎？

提前致謝

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. 看起來你正在混合 class 和功能組件，我建議使用功能組件，因為它現在更常見。 在這種情況下，問候語將如下所示：

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

在 Greeting.js 中你錯過了參數

應用程序.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

問候.js

import React from 'react'

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

export default Greeting