Реакция: ChildComponent не получает реквизиты, переданные через "this.state" - PullRequest
Новая
       78

Реакция: ChildComponent не получает реквизиты, переданные через "this.state"

2 голосов
/ 04 мая 2020

Я пытался передать реквизиты дочернему компоненту «MovPlayer», используя переменные, объявленные в this.state, но кажется, что реквизиты не принимаются. На странице отображаются пустые теги.

Вот мой главный компонент 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>

1 Ответ

1 голос
/ 04 мая 2020

Вы проходите так: 

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