如何通过 props 传递数据来显示数据？答案

【问题标题】：How to display data by passing it through props?如何通过 props 传递数据来显示数据？
【发布时间】：2018-09-11 15:25:24
【问题描述】：

我创建了一个 TeamsPage 组件，并将 firstName 作为道具传递给 PlayerName，我想在表格组件中显示它，但我收到错误 no valid react child components。

console.log(players) 即 player 是一个包含 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>
 )
}

【问题讨论】：

试试return <td>{name}</td>
假设 PlayerName 是它自己的 react 组件，那么你只需要返回它。所以{players.map(val => <PlayerName name={val.firstName}/>)}变成{players.map(val => return <PlayerName name={val.firstName}/>)}

标签： javascript reactjs

【解决方案1】：

您有一个名为PlayerName 的函数，它接收名称参数。

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>
)

【讨论】：

【解决方案3】：

或者像这样

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

【讨论】：