Question

我创建了一个TeamsPage组件，我将firstName作为prop传递给PlayerName，我想在表组件中显示它，但是我收到错误消息，没有有效的反应子组件。

console.log（玩家），即玩家是具有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>
 )
}

Answer 1

您可以将组件更改为：

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

Answer 2

您有一个名为synIdAttr()的函数，该函数接收一个名称参数。

PlayerName

您将其称为JSX标记，因此请记住实际上参数const PlayerName = (name) => ( <td>{name}</td> )是一个对象，因为调用name

它接收整个对象作为参数。

所以您有两种显示名称的方法

解构示例：

<PlayerName name={val.firstName} />

或

访问道具示例：

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

Answer 3

或者这样

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

如何通过道具传递数据来显示数据？

3 个答案: