我有包含项目的列。目前,根据我从 复制的代码react-beautiful-dnd
,列和项目都是可拖动的,并且运行良好,但我不希望列可拖动。
如果我删除该<Draggable/>
组件,React
则会对使用函数作为孩子感到不安。我已经尝试了很多其他的东西,没有任何运气。有关如何从此组件中删除列拖动功能的任何建议?
// @flow
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'react-emotion';
import { Draggable } from 'react-beautiful-dnd';
import { grid, colors, borderRadius } from './dnd/constants';
import PlayerList from './dnd/player-list';
import Title from './dnd/title';
const Container = styled('div')`
margin: ${grid}px;
`;
const Header = styled('div')`
display: flex;
align-items: center;
justify-content: center;
border-top-left-radius: ${borderRadius}px;
border-top-right-radius: ${borderRadius}px;
background-color: ${({ isDragging }) => (isDragging ? colors.blue.lighter : colors.blue.light)};
transition: background-color 0.1s ease;
&:hover {
background-color: ${colors.blue.lighter};
}
`;
const Column = ({ title, players, index }) => (
<Draggable draggableId={title} index={index}>
{(provided, snapshot) => (
<Container innerRef={provided.innerRef} {...provided.draggableProps}>
<Header isDragging={snapshot.isDragging}>
<Title
isDragging={snapshot.isDragging}
{...provided.dragHandleProps}
>
{title}
</Title>
</Header>
<PlayerList
listId={title}
players={players}
/>
</Container>
)}
</Draggable>
);
Column.propTypes = {
title: PropTypes.string.isRequired,
players: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
index: PropTypes.number.isRequired,
};
export default Column;