Question

React的新功能，我正在尝试计算如何在我的代码中添加/定义{user}。我试图运行它时，我只是在user not defined上收到错误。

我的代码目前：

import React from 'react';
import {
  Media,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from 'reactstrap';
import PropTypes from 'prop-types';

class UserPreview extends React.Component {
  toggle = ({user}) => this.setState({DropdownOpen: !this.state.DropdownOpen});

  render() {
    return (
      <div>
        <tr className="user">
          <td>
            <Media>
              <img
                alt={`${user.name} avatar`}
                className="avatar d-flex mr-3"
                src={user.url} />
              <Media body>{user.name}</Media>
            </Media>
          </td>
          <td>
            <Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle(this)}>
              <DropdownToggle caret>
                Admin
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem>Read</DropdownItem>
                <DropdownItem>Write</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </td>
          <td><Button color="warning">Delete</Button></td>
        </tr>
        <tr>
      </div>
    )
  }
}

UserPreview.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    // TODO: add an url proptype.
    url: PropTypes.string,
  }).isRequired,
};

export default UserPreview;

Answer 1

<Media>
      <img
            alt={`${user.name} avatar`}
            className="avatar d-flex mr-3"
            src={user.url} />
      <Media body>{user.name}</Media>
</Media>

这是错误引发的行，因为在切换功能中你没有使用user参数。

你需要：

<Media>
      <img
            alt={`${this.props.user.name} avatar`}
            className="avatar d-flex mr-3"
            src={this.props.user.url} />
      <Media body>{this.props.user.name}</Media>
</Media>

或者只是在user方法的开头提取render道具，如：

render() {
    let { user } = this.props;
    .
    .
    .

此外：

<Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle(this)}>

toggle组件的Dropdown prop应该是对函数的引用，并且您正在调用该函数，因此toggle prop实际上是undefined，因为{{ 1}}方法不会返回任何值。

你应该像这样传递toggle道具：

toggle

如果您希望将<Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle}>作为参数发送到user方法，您应该这样做：

toggle

然后你不需要解构，所以<Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle.bind(this, this.props.user)}>方法看起来像这样：

toggle

在React中使用道具或解构来定义用户

1 个答案: