如何通过道具传递数据?

问题描述 投票:1回答:3

我已经创建了一个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>
 )
}
javascript reactjs
3个回答
2
投票

你有一个名为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>
 )

2
投票

您可以将组件更改为:

const PlayerName = (props) => (
  <td>{props.name}</td>
)

1
投票

或者像这样

const PlayerName = ( {name} ) => (
  <td>{name}</td>
)
© www.soinside.com 2019 - 2024. All rights reserved.