反应：ChildComponent 没有收到通过“this.state”传递的道具

Question

I've been trying to pass the props to the child component "MovPlayer" using the variables declared in this.state, but it seems the props aren't being received. As the page renders blank tags.

Here's my MainComponent App.js

import React from "react";
import "./App.css";
import NavBar from "./NavBar";
import MovPlayer from "./MovPlayer";
import MovGallery from "./MovGallery";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      MovUrl: "https://somewebsite.com/files/videos/movie.mp4",
      MovName: "Movie Name",
      MovDesc: "Movie Description ....."
    };
  }
  render() {
    return (
      <div>
        <NavBar />
        <div>
          <MovPlayer
            url={this.state.MovUrl}
            name={this.state.MovName}
            desc={this.state.MovDesc}
          />
          <MovGallery />
        </div>
      </div>
    );
  }
}

export default App;

And this is my ChildComponent MovPlayer.js

import React from "react";
import "./App.css";

function MovPlayer(props) {
  return (
    <div
      className="row"
      style={{ position: "relative", top: "1em", margin: "0 0em" }}
    >
      <div className="col-md-4">
        <video controls="true" style={{ maxWidth: "100%" }}>
          <source src={props.MovUrl} type="video/mp4" />
        </video>
      </div>
      <div className="col-md-8">
        <h2>{props.MovName}</h2>
        <h3 className="badge badge-danger">Now Playing</h3>
        <br />
        <small className="text-muted">{props.MovDesc}</small>
      </div>
    </div>
  );
}

export default MovPlayer;

And the Final Web Page renders like so,

<div class="row" style="position: relative; top: 1em; margin: 0px 0em;">
  <div class="col-md-4">
    <video controls="" style="max-width: 100%;">
    <source type="video/mp4">
    </video>
  </div>
  <div class="col-md-8">
    <h2></h2>
    <h3 class="badge badge-danger">Now Playing</h3><br>
    <small class="text-muted"></small>
  </div>
</div>

Answer 1

You are passing as like this:

<MovPlayer
  url={this.state.MovUrl}      // should be accessed as props.url
  name={this.state.MovName}    // should be accessed as props.name
  desc={this.state.MovDesc}    // should be accessed as props.desc
/>

So you should be accessing using:

• props.name
• props.url
• props.desc

Else, change your props this way:

<MovPlayer
  MovUrl={this.state.MovUrl}      // can be accessed as props.MovUrl
  MovName={this.state.MovName}    // can be accessed as props.MovName
  MovDesc={this.state.MovDesc}    // can be accessed as props.MovDesc
/>