反应：子组件未收到通过"this.state"传递的道具

Question

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

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

这是我的ChildComponentMovPlayer.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
/>