Question

大家好我有这个代码，我已经添加了一个表

import React, {Component} from 'react';
import Auth from '../modules/Auth';
import Dashboard from '../components/Dashboard.jsx';
import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';


class DashboardPage extends React.Component {

  /**
   * Class constructor.
   */
  constructor(props) {
    super(props);

    this.state = {
      secretData: '',
      selected: [1]
    };
  }

componentDidMount() {
        const xhr = new XMLHttpRequest();
        xhr.open('get', '/api/dashboard');
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        // set the authorization HTTP header
        xhr.setRequestHeader('Authorization', `bearer ${Auth.getToken()}`);
        xhr.responseType = 'json';
        xhr.addEventListener('load', () => {
          if (xhr.status === 200) {
            this.setState({
              secretData: xhr.response.message
            });
          }
        });
        xhr.send();
        isSelected = (index) => {
        return this.state.selected.indexOf(index) !== -1;
        };
        handleRowSelection = (selectedRows) => {
        this.setState({
          selected: selectedRows,
         });
        };
      }

  /**

我已经传递了这样的数据，这是正确的

   */
  render() {
    return (<Dashboard isSelected={this.isSelected} handleRowSelection={this.handleRowSelection} />);
  }

}

    export default DashboardPage;

这是另一个代码

  import React, { PropTypes, Component } from 'react';
import { Card, CardTitle, CardText } from 'material-ui/Card';
import {Table,TableBody,TableHeader,TableHeaderColumn,TableRow,TableRowColumn,} from 'material-ui/Table';



const Dashboard = ({handleRowSelection, isSelected }) => (
<Table onRowSelection={this.handleRowSelection}>
        <TableHeader>
          <TableRow>
            <TableHeaderColumn>ID</TableHeaderColumn>
            <TableHeaderColumn>Name</TableHeaderColumn>
            <TableHeaderColumn>Status</TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow selected={this.isSelected(0)}>
            <TableRowColumn>1</TableRowColumn>
            <TableRowColumn>John Smith</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
          <TableRow selected={this.isSelected(1)}>
            <TableRowColumn>2</TableRowColumn>
            <TableRowColumn>Randal White</TableRowColumn>
            <TableRowColumn>Unemployed</TableRowColumn>
          </TableRow>
          <TableRow selected={this.isSelected(2)}>
            <TableRowColumn>3</TableRowColumn>
            <TableRowColumn>Stephanie Sanders</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
          <TableRow selected={this.isSelected(3)}>
            <TableRowColumn>4</TableRowColumn>
            <TableRowColumn>Steve Brown</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
        </TableBody>
      </Table>
);


export default Dashboard;

我想要的是将函数isSelected，handleRowSelection传递给另一方但是我有那个问题告诉我未捕获的ReferenceError：isSelected未定义我想要的是应用此http://www.material-ui.com/#/components/table 是否有一种方法可以传递该功能

Answer 1

的变化：

1- Dashboard是无状态功能组件，因此没有this关键字。

2-你只是在解构一个参数并忽略所有其他参数，在这里：

const Dashboard = ({handleRowSelection }) => (.....)

isSelected组件中未定义<{3> {3}}。

<强>解决方案：

1 - 避免破坏，并按照以下方式编写：

DashboardPage

并替换：

const Dashboard = (props) => ( 

)

2 - 或者构建其他道具值：

this.handleRowSelection` by `props.handleRowSelection
this.isSelected[0]` by `props.isSelected[0]

并const Dashboard = ({handleRowSelection, isSelected }) => (....)和handleRowSelection直接使用它们。

Answer 2

首先，在DashboardPage中，您需要将isSelected和handleRowSelection定义为方法（或者类属性）。

其次，您需要在this.组件中的任何位置删除Dashboard。

第三，您需要使用isSelected中的Dashboard回调，例如：() => isSelected(0)。这将确保在您实际选择表行后调用isSelected。目前，在isSelected组件安装后，Dashboard将被调用4次，因为该函数是直接调用的。

顺便说一下，老实说，我建议你参加一些关于ES6和React基础知识的在线课程，否则你不会知道你在做什么以及为什么它会像它那样有效。

从道具传递函数到渲染函数做出反应

2 个答案: