新的反应和使用 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;