Javascript 我的应用程序中的箭头函数有问题
在我添加初始players.map arrow函数步骤在第52行（players List comment）实现之前，一切正常。记分板应该使用播放器的数组显示其下的名称值。在这一步之前，当我使用开发工具检查元素时，所有内容都会显示出来。也许这是我观看视频5倍时没有捕捉到的内容 以下是该网站的链接： 链接到代码： 我试过多次查看语法Javascript 我的应用程序中的箭头函数有问题,javascript,reactjs,Javascript,Reactjs,在我添加初始players.map arrow函数步骤在第52行（players List comment）实现之前，一切正常。记分板应该使用播放器的数组显示其下的名称值。在这一步之前，当我使用开发工具检查元素时，所有内容都会显示出来。也许这是我观看视频5倍时没有捕捉到的内容 以下是该网站的链接： 链接到代码： 我试过多次查看语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
<!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') );
记分牌
康斯特玩家=[
{
姓名：“吉尔”，
分数：50
},
{
名称：“宝藏”，
分数：85
},
{
姓名：“艾希礼”，
分数：95
},
{
姓名：“詹姆斯”，
分数：80
}
];
常数头=（道具）=>{
返回(
{props.title}
玩家：{props.totalPlayers}
);
}
常量玩家=（道具）=>{
报税表（
{props.name}
);
}
常量计数器=（道具）=>{
报税表（
-
{props.score}
+
);
}
常量应用=（道具）=>{
报税表（
//{玩家列表*/}
{props.initialPlayers.map（player=>
)}
); }
ReactDOM.render（
,
document.getElementById（'root'）；
{props.initialPlayers.map( (player, index) => {
return <Player
key={index}
name={player.name}
score={player.score}
/>
})}
{props.initialPlayers.map（（播放器，索引）=>{
返回
})}