无法将道具传递给组件

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