無法將道具傳遞給組件

Question

使用Material UI, Table Component。 已在根組件中導入的所有內容。我遇到的問題是 將屬性傳遞給子組件<UserList />。我可以通過users但就是這樣。

我的錯誤是props are undefined，這意味着我沒有傳遞任何東西給孩子， 但我怎麼能通過用戶，但不是？我在這裏錯過了什麼？

用戶容器

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

import { fetchUsers } from '../actions/usersActions'; 
import UsersList from '../components/users/UsersList'; 

export default class Users extends Component { 
    componentDidMount(){ 
    this.props.dispatch(fetchUsers('')); 
    } 
    render(){ 
    const showCheckboxes = 'false'; 
    return(
     <div> 
     <UsersList users={this.props.users} showCheckboxes={showCheckboxes}/> 
     </div> 
    ); 
    } 
} 

Userslist

import React from 'react'; 
import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table'; 

export default function UsersList({ users }, props) { 
    const emptyMessage = (
    <p>There are no users</p> 
); 
    const usersList = users.map(user => 
    <li key={user.id}>{user.name}</li> 
); 

    return (
    <div> 
     <Table> 
     <TableHeader displaySelectAll={this.props.showCheckboxes}> 
      <TableRow> 
      <TableHeaderColumn>ID</TableHeaderColumn> 
      </TableRow> 
     </TableHeader> 
     </Table> 
     {users.length === 0 ? emptyMessage : usersList} 
    </div> 
); 
} 

Answer 1

作爲

說official docs：

該功能是有效的陣營組件，因爲它接受一個單個 「道具」對象參數與數據並返回一個React元素。

所以您的組件應該是這樣的：

import React from 'react'; 
import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table'; 

export default function UsersList(props) { 
    const emptyMessage = (
    <p>There are no users</p> 
); 
    const usersList = props.users.map(user => 
    <li key={user.id}>{user.name}</li> 
); 

    return (
    <div> 
     <Table> 
     <TableHeader showCheckboxes={props.showCheckboxes}> 
      <TableRow> 
      <TableHeaderColumn>ID</TableHeaderColumn> 
      </TableRow> 
     </TableHeader> 
     </Table> 
     {props.users.length === 0 ? emptyMessage : usersList} 
    </div> 
); 
}