javascript - 在我的应用程序中遇到箭头功能问题
问题描述
一切正常,直到我在第 52 行(玩家列表注释)中添加了初始的 player.map 箭头功能步骤。记分牌应该使用播放器的数组显示其下方的名称值,当我使用开发工具检查元素时,所有内容都会显示,直到这一步可能是我没有看到观看视频 5 倍的内容。
这是该站点的链接:https ://codingoni.github.io/React-Project/ 代码链接:https ://github.com/CodingOni/React-Project
我已经尝试过多次查看语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scoreboard</title>
<link rel="stylesheet" href="./app.css" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel" src="app.js"></script>
</body>
</html>
const players = [
{
name: "Guil",
score: 50
},
{
name: "Treasure",
score: 85
},
{
name: "Ashley",
score: 95
},
{
name: "James",
score: 80
}
];
const Header = (props) => {
return(
<header>
<h1>{props.title}</h1>
<span className="stats">Player: {props.totalPlayers} </span>
</header>
);
}
const Player = (props) => {
return( <div className="player">
<span className="player-name"> {props.name} </span>
<Counter score={props.score} />
</div>
);
}
const Counter = (props) => {
return( <div className="counter">
<button className="counter-action decrement">-</button>
<span className="counter-score">{props.score}</span>
<button className="counter-action increment">+</button>
</div>
);
}
const App = (props) =>{
return(
<div className="scoreboard">
<Header title="Scoreboard" totalPlayers={"1"}/>
// {Players List*/}
{props.initialPlayers.map( player =>
<Player
name={player.name}
score={player.score}
/>
)}
<Player name="Tyrique" score={20} />
<Player name="Tyrique" score={30} />
<Player name="Tyrique" score={10} />
<Player name="Tyrique" score={15} />
</div> ); }
ReactDOM.render(
<App initialPlayers={players} />,
document.getElementById('root') );
显示在黑板上的名字和分数
解决方案
也许尝试:
{props.initialPlayers.map( (player, index) => {
return <Player
key={index}
name={player.name}
score={player.score}
/>
})}
推荐阅读
- mysql - 从同一个表mysql存储过程中选择具有不同条件的多个计数
- javascript - BABYLON.AnimationEvent 的行为不符合预期
- google-cloud-firestore - Firestore 限制数组字段条目
- excel - 如何使用 VBA 将宏粘贴到其他工作表
- google-api - 使用 admin sdk API 无法使用“OAuth 2.0 for Server to Server Applications”协议读取用户
- bash - 循环中内置的bash调用变量
- sql - SQL - LAG 函数 - 运行总计
- c - 如何在应用程序(stm32f4 HAL)中更改 SCB->VTOR?
- python-3.x - ubuntu 18.04 上缺少 tkinter 包
- xamarin.ios - 如何使我的视图控制器可滚动?