javascript - 如何在 React 中将点击的组件中的数据从一个路由传递到另一个路由?
问题描述
我正在开发一个视频游戏搜索应用程序,它使用 React Router 从 GiantBomb API 获取数据。在 SearchGames 组件上完成搜索后,它会通过 Game 组件从 API 返回游戏列表。我坚持的是弄清楚如何使用路由器将您单击的列出游戏的数据详细信息传递给 GamesDetail 组件。我不认为我可以使用道具来做到这一点,因为包含所有细节的单独视图既不是父组件也不是子组件。我希望我的要求是有道理的。
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Nav />
<div className="container">
<Switch>
<Route exact path="/" component={MainPage} />
<Route exact path="/games" component={GameSearch} />
<Route exact path="/about" component={About} />}
<Route exact path="/details" component={GamesDetails} />}
</Switch>
</div>
</div>
</Router>
);
}
}
class Search extends Component {
constructor(props) {
super(props);
this.state = {
title: "",
games: []
}
}
updateInput = (event) => {
this.setState({
title: event.target.value
});
}
handleGames = (search) => {
const proxyUrl = "https://cors-anywhere.herokuapp.com/";
const key = "8cd10a7136710c1003c8e216d85941ace5a1f00e";
const endpoint = `https://www.giantbomb.com/api/search/?api_key=`;
const url = proxyUrl + endpoint + key + `&format=json&resources=game&query=${search}&limit=30`;
fetch(url)
.then(res => res.json())
.then(data => {
const response = data.results;
console.log(response);
response.forEach(game => {
this.setState(prevState => ({
games: prevState.games.concat(game)
}))
});
});
this.setState({
games: []
})
}
handleSubmit = (e) => {
const { title } = this.state;
e.preventDefault();
if (!title) {
return;
} else {
this.handleGames(title);
}
}
render() {
const { games } = this.state;
return (
<div className="App">
<div className="search-bar">
<form>
<input
className="input-field"
type="text"
placeholder="Search Game"
onChange={this.updateInput}
/>
<button
className="search-button"
onClick={this.handleSubmit}
>Search</button>
</form>
</div>
<div className="container">
{games.length > 0 ? (
games.map(game => {
return <Game
key={game.id}
icon={game.image.icon_url}
gameTitle={game.name}
/>
})
) : (
console.log(this.state.title)
)
}
</div>
</div>
);
}
}
const Game = (props) => {
const { icon, gameTitle } = props;
return (
<div className="games-container">
<div className="game-box">
<img src={icon} alt="icon" />
<Link to="/details">
<p><strong>{gameTitle}</strong></p>
</Link>
</div>
</div>
);
}
const GameDetails = (props) => {
const { icon, release, genres, summary} = props;
return (
<div className="details-content">
<div className="box-art">
<img src={icon} alt="box art" />
</div>
<div className="game-info">
<h1>Game Details</h1>
<div className="release-date">
<h3>Release Data</h3>
<p>{release}</p>
</div>
<div className="genres">
<h3>Genres</h3>
<p>{.genres}</p>
</div>
<div className="summary">
<h3>Summary</h3>
<p>{summary}</p>
</div>
</div>
</div>
);
}
解决方案
您应该能够使用Link
withto
作为对象来实现这一点,它公开了一个state
比可以传递给结果的对象Route
:
// ...
// pass game object to Game component
// if you are passing game, you probably don't need other props explicitly passed
{games.length > 0 ? (
games.map(game => {
return <Game
key={game.id}
game={game}
icon={game.image.icon_url}
gameTitle={game.name}
/>
})
) : (
console.log(this.state.title)
)
}
// ...
const Game = (props) => {
const { icon, gameTitle, game } = props;
return (
<div className="games-container">
<div className="game-box">
<img src={icon} alt="icon" />
<Link to={{ pathname: "/details", state: { game } }}>
<p><strong>{gameTitle}</strong></p>
</Link>
</div>
</div>
);
}
然后,您可以从注入state
的道具位置访问它:react-router-dom
props
const GamesDetails = (props) => {
const { image: { icon_url: icon }, release, genres, summary } = props.location.state.game;
return (
<div className="details-content">
<div className="game-info">
<h1>Game Details</h1>
<div className="box-art">
<img src={icon} alt="box art" />
</div>
<div className="release-date">
<h3>Release Data</h3>
<p>{release}</p>
</div>
<div className="genres">
<h3>Genres</h3>
<p>{genres}</p>
</div>
<div className="summary">
<h3>Summary</h3>
<p>{summary}</p>
</div>
</div>
</div>
);
}
这是一个实际的例子。
希望这会有所帮助!
推荐阅读
- javascript - 如何测试一个函数?
- java - 如何将数据从活动传递到地理围栏广播接收器?
- excel - 将 sheet2 第一行的最后一列与 sheet1 的 F2 单元格进行比较,如果匹配,则显示 msgbox,否则将 F2 范围粘贴到 sheet2
- python - 我在 pygame 中创建了一个没有动画的基本平台游戏。我已经为左右移动使用了事件处理,但我无法添加跳跃机制
- javascript - 在反应中导出 PDF?
- c - graphics.h 库的一些功能在 linux 的 c 文件中不起作用(ubuntu LTS 20.04)
- python - 如何使用字典将这些整数元组列表翻译成名称元组列表?
- swift - 导出所有文本以进行本地化
- c++ - 如何为此方法创建重载?
- encryption - 加载 ECIES 公钥