Question

使用Material UI, Table Component。所有已在Root组件中导入的内容。我遇到的问题是将属性传递给子组件<UserList />。我可以通过users，但就是这样。

我的错误是props are undefined，这意味着我没有向孩子传递任何东西，但我怎样才能通过用户而不是showCheckboxes？我在这里缺少什么？

用户容器

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组件，因为它接受单个使用数据“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>
  );
}

无法将Props传递给组件

1 个答案: