Reactjs 从父级删除可拖动，同时在dnd中维护可拖动的子级

我有列，列中有项目。目前，根据我从

dnd

复制的代码，列和项都是可拖动的，并且工作正常，但我不希望列是可拖动的

如果我删除

组件，

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;

/@flow
从“React”导入React；
从“道具类型”导入道具类型；
从“反应情绪”导入样式；
从'dnd'导入{Draggable}；
从“./dnd/constants”导入{grid，colors，borderRadius}；
从“/dnd/player list”导入PlayerList；
从“./dnd/Title”导入标题；
const Container=styled（'div'）`
边距：${grid}px；
`;
const Header=styled（'div'）`
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框左上半径：${borderRadius}px；
边框右上半径：${borderRadius}px；
背景色：${（{isDraging}）=>（isDraging？colors.blue.lighter:colors.blue.light）}；
过渡：背景色0.1s；
&：悬停{
背景色：${colors.blue.lighter}；
}
`;
常量列=（{title，players，index}）=>(
{（已提供，快照）=>(
{title}
)}
);
Column.propTypes={
标题：PropTypes.string.isRequired，
玩家：PropTypes.arrayOf（PropTypes.shape（{}））.isRequired，
索引：PropTypes.number.isRequired，
};
导出默认列；

从

列中完全删除
Draggable

const列=（{title，players，index}）=>(
{title}
);

您可能需要删除

可下拉列表

包装所有

列

。这很可能是在

板中

组件中，您在此未包括该组件

const Column = ({ title, players, index }) => (
 <Container>
   <Header isDragging={false}>
     <Title isDragging={false}>
        {title}
     </Title>
  </Header>
  <PlayerList
     listId={title}
     players={players}
   />
</Container>
);