我正在学习React，我有一个问题不知道如何解决，所以如果你能帮我解决的话。我想创建一个简单的react应用程序，用.map()方法创建3个组件。我想将数据传递给Head组件，我可以单独访问每一张卡。我使用了.map()方法，但所有卡片都在一页上。我可以用.map()方法做到这一点，并将数据传递给nav组件吗？
function Card(props) {
return (
<Router>
<div id="wrapper">
<Link to="#"><button id="request" href="#">
REQUEST
</button></Link>
<h1 id="naslov">{props.name}</h1>
<p>{props.key}</p>
<div id="povez">
<a id="srcek"><FiHeart /></a>
<button id="follow">Follow</button>
<a id="kocka"><FiExternalLink /></a>
</div>
<div>
<h4 className="he4der">ORIGIN</h4>
<button id="origin">COUNTRY</button>
</div>
<div>
<h4 className="he4der">GENRE</h4>
<button id="origin">ROCK</button>
</div>
<div>
<h4 className="he4der">SUBGENRES</h4>
<button id="origin">ROCK</button>
<button id="origin2">METAL</button>
</div>
<div>
<button id="origin">ROCK</button>
<a id="kocka2"><FiExternalLink /></a>
</div>
<div id="breaker"></div>
<div id="socialinks">
<div id="social">
<span id="sicon"><FaFacebookF /></span>
<span id="sicon"><FaTwitter /></span>
<span id="sicon"><FaInstagram /></span>
<span id="sicon"><FaSpotify /></span>
</div>
<div id="plus">
<a id="kocka2"><FiExternalLink /></a>
</div>
</div>
</div>
)
}
导出默认卡
我想把artist_name传递给nav组件，这样当我单击该名称，我可以访问与该名称相关的卡组件姓名/艺术家。
使用all_artists并映射您的链接可能更有意义，而不是传递单个艺术家。如果all_artists在全局范围内不可用，则可以将其作为道具传递。
const Head = (props) => {
return (
<div id="header">
<img src={Logo} id="logo" />
<ul>
{props.artists.map(({ artist_id, artist_name }) => (
<li key={artist_id}>
<Link to={`/artist/${artist_name}`}>{artist_name}</Link>
</li>
)}
</ul>
<div id="icns">
<i><FiSearch /></i>
<i><FiAlignJustify /></i>
</div>
</div>
)
}
将all_artists传递到Head，并在name道具上呈现一个动态路由以从要传递给Card的路径中提取name。请注意，Router被移到这里是为了为Head中的Link组件和App中的Route组件提供路由上下文。
function App() {
return (
<div className="App">
<Router>
<Head artists={all_artists} />
<Route
path="/artist/:name"
render={({ match: { params: { name } } }) => (
<Card name={name}>
)}
/>
</Router>
</div>
);
}
CCD_ 18将需要利用生命周期来"；反应"；对name道具的任何更改，如从API端点或redux状态获取/加载特定艺术家数据。
您需要将想要显示的artist_id(作为道具(传递给您的组件(即渲染卡(，然后您可以使用find((数组方法在数组中搜索/过滤您需要的对象，因为您已经有了艺术家的id。
如果你想让所有的艺术家都在你的导航中，你可能想在你的路由器上使用switch-and-map((方法
像这样的东西：
<Switch>
{ all_artists.map( artist =>
<Route path=`/{artist.id}` render={ <CardComponent clickedArtist={artist} /> }/>
)}
</Switch>