我創(chuàng)建了電影和視頻的單頁應用程序。此 Web 應用程序有 4 個鏈接，可顯示不同類型的視頻和電影。例如，“兒童”鏈接顯示兒童視頻，“體育”鏈接顯示體育視頻等。根據(jù)鏈接名稱，我正在調用 API 以在該頁面上加載數(shù)據(jù)。但是在點擊鏈接時，這并沒有發(fā)生。下面是代碼// Root.jsclass Root extends Component { constructor(props) { super(props); this.state = { items: [], isLoaded: false, } } componentDidMount() { let currentPath = this.props.match.path; var apiUrl = ""; if (currentPath == "/movies") { apiUrl = "zzzzzzzzz"; } else if (currentPath == "/kids") { apiUrl = "yyyyyyyyy"; } else if (currentPath == "/sports") { apiUrl = "xxxxxxxx"; } fetch(apiUrl) .then(res => res.json()) .then(json => { this.setState({ items: json, isLoaded: true }); }) } render() { var { items, isLoaded } = this.state; return ( <div className="Root" > <HeaderNav /> <Main items={items} /> <Footer /> </div> ); }}export default Root;// App.jsclass App extends Component { render() { return ( <Router> <Switch> <Route path="/" exact component={Root} /> <Route path="/movies" exact component={Root} /> <Route path="/kids" exact component={Root} /> <Route path="/" render={() => <h2> 404 Not Found</h2>} /> </Switch> </Router> ); }}
2 回答
慕桂英4014372
TA貢獻1871條經(jīng)驗 獲得超13個贊
在這里分享我的發(fā)現(xiàn)
// MenuComponent.js
import React, {Component} from 'react';
import Root from './Root';
class Kids extends Component {
render() {
return (
<Root text="kids" />
);
}
}
class Movies extends Component {
render() {
return (
<Root text="movies" />
);
}
}
class Sports extends Component {
render() {
return (
<Root text="sports" />
);
}
}
export { Kids, Movies, Sports };
添加了一個新的組件類，其中包含所有菜單的類
//Updated App.js
import React, {Component} from 'react';
import './css/main.css';
import './css/bootstrap/css/bootstrap.min.css';
import Root from "./Components/Root"
import { Kids, Movies, Sports } from "./Components/MenuComponents"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path='/movies' exact component={Movies} />
<Route path='/sports' exact component={Sports} />
<Route path='/kids' exact component={Kids} />
<Route path="/" exact component={Root} />
<Route path="/*" render={() => <h2> 404 Not Found</h2>} />*/}
</Switch>
</Router>
);
}
}
export default App;
然后我在 Route 組件中調用上面的菜單組件類。MenuComponent.js 中的類間接調用“根”組件。通過這種方式，我可以確保組件的可重用性
這對我來說非常有效。如果我們想添加新菜單，請在 MenuComponent.js 中添加一個類并為菜單添加一個 Route
吃雞游戲
TA貢獻1829條經(jīng)驗 獲得超7個贊
您的 if/else 塊并不詳盡，您確定 currentPath 不是未定義的嗎？嘗試console.log(currentPath)在條件之后。如果可行，則嘗試console.log(json)在 this.setState() 之前，以確保 json 結果是預期的。最后，您確定items以列表的形式返回嗎？
- 2 回答
- 0 關注
- 104 瀏覽
添加回答
舉報
0/150
提交
取消