Question

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

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

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;

Answer 1

问题是您在DOM呈现器中引入了react子组件，而不是将标题传递给它的App类。

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

您必须放置App而不是Greeting

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

Answer 2

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

Answer 3

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

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

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

来自其他组件的传递道具无法读取

3 个答案: