正在反应 jsx 中运行 reactstrap 下拉菜单

Posted 2023-03-23

【中文标题】正在反应 jsx 中运行 reactstrap 下拉菜单

【英文标题】：Is running reactstrap dropdown in react jsx

【发布时间】：2017-11-29 16:27:24

【问题描述】：

新的反应和使用 reactstrap。我只是试图添加一个下拉菜单并运行此代码，因为它最初在语法上出错，但是当我修改时，它会引发更多错误。代码如下：

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

const UserPreview = (user) => (

this.toggle = this.toggle.bind(this);
this.state = 
  DropdownOpen: false
  ;


toggle() 
  this.setState(
    DropdownOpen: !this.state.DropdownOpen
  );


  <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>
        <DropdownToggle caret>
          Admin
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Read</DropdownItem>
          <DropdownItem>Write</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </td>
  </tr>
);

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

export default UserPreview;

【问题讨论】：

定义发生了什么错误？您能否尽可能具体地提出您的问题，或者提出MVCE？

【参考方案1】：

您的代码包含很多错误。我已将它们删除并添加了 cmets，

import React from 'react';
import 
  Media,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
 from 'reactstrap';

import PropTypes from 'prop-types';

//you should use class if your component has its own state
class UserPreview extends React.Component

    //use constructor to define state and initialize component
    constructor(props)
        super(props)
        this.toggle = this.toggle.bind(this);
        this.state = 
            DropdownOpen: false
        
    


    toggle() 
        this.setState(
            DropdownOpen: !this.state.DropdownOpen
        );
    
    render()
        //you will need to bind toggle so that you can use setstate in it.
        return(
            <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.bind(this)>
                    <DropdownToggle caret>
                        Admin
                    </DropdownToggle>
                    <DropdownMenu>
                        <DropdownItem>Read</DropdownItem>
                        <DropdownItem>Write</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </td>
        </tr>
    )



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

export default UserPreview;

【讨论】：

为什么在此处删除用户，因为它引用了另一个主组件？

另外，JSX可以不使用.bind()