Question

我一直试图使用在this.state中声明的变量将道具传递给子组件“ MovPlayer”，但是似乎道具没有被接收。当页面呈现空白标签时。

这是我的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;

这是我的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;

最终的网页呈现如下，

<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

您这样经过：

<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
/>

因此，您应该使用：

props.name
props.url
props.desc

否则，请以这种方式更改道具：

<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
/>

反应：ChildComponent不接收通过“ this.state”传递的道具

1 个答案: