[英]React: ChildComponent not recieving props passed through “this.state”
我一直在嘗試使用 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;
最終的Web 頁面呈現如下,
<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>
你是這樣傳遞的:
<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
/>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.