我已经创建了一个TeamsPage组件,我将firstName作为propName传递给PlayerName,我想在表组件中显示它但是我收到错误没有有效的反应子组件。
console.log(players),即players是包含5个元素的数组,每个数组元素都有firstName,lastName,email等键值对。
码:
const PlayerName = (name) => (
<td>{name}</td>
)
const TeamsPage = ({isLoaded, teamIdStr}) => {
let teamId = new Mongo.ObjectID(teamIdStr)
let teamInfo = Teams.findOne({_id: teamId})
let players = Players.find({}).fetch()
console.log(players)
return(
<div>
<div className="cardHeader">
<h4>Team Name</h4>
<div className="cardContent">
<div className="table-responsive">
<table className="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Heading</th>
<th scope="col">Heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
{players.map(val => <PlayerName name={val.firstName}/>)}
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
)
}
你有一个名为PlayerName
的函数,它接收一个name参数。
const PlayerName = (name) => (
<td>{name}</td>
)
并且你将它称为JSX标记,所以请记住,实际上参数name
是一个对象,因为当你调用<PlayerName name={val.firstName} />
时
它接收整个对象作为参数。
所以你有两种方式来显示名称
解构示例:
const PlayerName = ({ name }) => (
<td>{name}</td>
)
要么
访问道具示例:
const PlayerName = props => (
<td>{props.name}</td>
)
您可以将组件更改为:
const PlayerName = (props) => (
<td>{props.name}</td>
)
或者像这样
const PlayerName = ( {name} ) => (
<td>{name}</td>
)