如何传递每个组件id

Question

我想实现拖动组件（漂亮的dnd），以便用户可以交换它们。但是为此，据我了解，每个组件都必须有一个 id。但是我不知道怎么做

import React from 'react';
import CardWeather from '../cardWeather/CardWeather';
import WeatherMap from '../cardWeatherMap/WeatherMap';
import Forecast from '../forecast/Forecast';
import WeatherGrapth from '../weatherGraph/WeatherGraph';
import './main.scss';
import { Droppable } from 'react-beautiful-dnd';

const Main = () => {

    return (
      <>
      <Droppable droppableId="main">
        {
          (provided) => (
            <div className="main-container"
            ref={provided.innerRef} 
            {...provided.droppableProps}
            >
            <CardWeather />
            <Forecast/>
            <WeatherGrapth/>
            <WeatherMap/>
        </div>
          )
        }

      </Droppable>


        <div className="pr">weather app</div>
        </>
    )
}

export default Main;

Answer 1

如果我理解正确，您需要为您的案例中的每个组件提供某种 ID：

 <CardWeather />
 <Forecast/>
 <WeatherGrapth/>
 <WeatherMap/>

您可以为每个组件通过 props 传递 id。示例：

主要成分：

  <CardWeather id="1" />

CardWeather 组件：

function CardWeather(props){
  const id = props.id
  ...
  return(
    <div data-id={id}>
    ...
    </div>
  )
}
...

而且您必须为每个要拖放的组件执行此操作。

Answer 2

嗨，为此您还需要使用从 'react-beautiful-dnd'.
此外，如果您的项目没有唯一 ID，您可以使用 'react-uuid' 包传递给 'draggableId'。它将为您创建唯一的 ID。
而且我强烈推荐给你看这个关于“react-beautiful-dnd”的课程。本课程由开发“react-beautiful-dnd”的人创建。 https://egghead.io/courses/beautiful-and-accessible-drag-and-drop-with-react-beautiful-dnd


<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre><code>import React from 'react';
import CardWeather from '../cardWeather/CardWeather';
import WeatherMap from '../cardWeatherMap/WeatherMap';
import Forecast from '../forecast/Forecast';
import WeatherGrapth from '../weatherGraph/WeatherGraph';
import './main.scss';
import { Droppable, Draggable } from 'react-beautiful-dnd';
import uuid from 'react-uuid';

const Main = () => {

    return (
        <>
            <Droppable droppableId="main">
                {
                    (provided) => (
                        <Draggable
                            draggableId={uuid()}
                            index={"element index"}
                        >
                            {(provided, snapshot) => {
                                <div className="main-container"
                                    ref={provided.innerRef}
                                    {...provided.droppableProps}
                                    isDragging={snapshot.isDragging}
                                >
                                    <CardWeather />
                                    <Forecast />
                                    <WeatherGrapth />
                                    <WeatherMap />
                                </div>
                            }}
                        </Draggable>
                    )
                }

            </Droppable>
            <div className="pr">weather app</div>
        </>
    )
}

export default Main;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

最好每个组件也有一个关键道具。这样一来，如果我进行更改，您将获得重新渲染。

如何传递每个组件id

How to pass each component id

reactjs

drag-and-drop