无法读取来自另一个组件的传递的道具答案

【问题标题】：Passed props from another component cannot be read无法读取来自另一个组件的传递的道具
【发布时间】：2019-11-08 01:27:55
【问题描述】：

我正在尝试将道具传递给另一个组件，但它只是返回一个空白对象

我已经尝试过创建一个构造函数，但没有成功。

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    const greeting = "Welcome to React";
    return (
      <div>
        <Greeting greeting={greeting} />
      </div>
    );
  }
}

class Greeting extends React.Component {
  render() {
    return <h1>{this.props.greeting}</h1>;
  }
}

ReactDOM.render(<Greeting />, document.getElementById("root"));
export default App;

【问题讨论】：

标签： javascript reactjs jsx react-props

【解决方案1】：

问题是您在 DOM 渲染中引入了 react 子组件，而不是 App 类，后者是将标题传递给它的类。

看看这个解决方案： https://codesandbox.io/s/react-example-o6rtk

你必须放 App 而不是 Greeting

ReactDOM.render(<App />, document.getElementById("root"));

【讨论】：

哦，谢谢。对不起这个愚蠢的问题，我只是一个新手
别担心，我们都曾经是新手，而那些还没有的人，我们还有很多东西要学@JeffreyDelosSantos

【解决方案2】：

您正在尝试在根 div 中呈现 Greeting 组件，请删除该行。

【讨论】：

【解决方案3】：

您需要在 ReactDOM 中渲染父组件以将 props 传递给子组件。

您可以在下面的链接中查看您的问题和解决方案的实际演示

https://stackblitz.com/edit/react-saflfb

【讨论】：