Javascript 无法将道具传递给组件

使用。 在根组件中导入的所有内容。我遇到的问题是 将属性传递给子组件

。我可以通过

用户

，但仅此而已

我的错误是道具未定义，这意味着我没有向孩子传递任何东西， 但是如何传递用户而不是

显示复选框

？我错过了什么

用户容器

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

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“../actions/usersActions”导入{fetchUsers}；
从“../components/users/UsersList”导入UsersList；
导出默认类用户扩展组件{
componentDidMount（）{
this.props.dispatch（fetchUsers（“”））；
}
render（）{
常量显示复选框='false'；
返回(
);
}
}

用户列表

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

从“React”导入React；
从“物料界面/表格”导入{表格、表体、表尾、表头、表头列、表行、表行列}；
导出默认函数UsersList（{users}，props）{
常量空消息=(
没有用户

);
const usersList=users.map（user=>
{user.name}
);
返回(
身份证件
{users.length==0？清空消息：usersList}
);
}

比如说：

此函数是有效的React组件，因为它接受单个 使用数据“props”对象参数，并返回一个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>
  );
}

从“React”导入React；
从“物料界面/表格”导入{表格、表体、表尾、表头、表头列、表行、表行列}；
导出默认函数UsersList（道具）{
常量空消息=(
没有用户

);
const usersList=props.users.map（user=>
{user.name}
);
返回(
身份证件
{props.users.length==0？清空消息：usersList}
);
}

Ok这很有道理，我所指的代码片段只是经过了解构。谢谢你澄清这一点。在一个需要清理的属性中也犯了一个错误。是的，如果你想传递解构道具，你仍然应该传递一个参数，但作为一个对象。e、 g:

UsersList（{users，showCheckboxes}）

问题是我不确定该组件需要什么，所以只传递道具可以实现更好的重用性。