如何传递每个组件id
How to pass each component id
我想实现拖动组件(漂亮的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;
如果我理解正确,您需要为您的案例中的每个组件提供某种 ID:
<CardWeather />
<Forecast/>
<WeatherGrapth/>
<WeatherMap/>
您可以为每个组件通过 props 传递 id。示例:
主要成分:
<CardWeather id="1" />
CardWeather 组件:
function CardWeather(props){
const id = props.id
...
return(
<div data-id={id}>
...
</div>
)
}
...
而且您必须为每个要拖放的组件执行此操作。
- 嗨,为此您还需要使用从 '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>
我想实现拖动组件(漂亮的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;
如果我理解正确,您需要为您的案例中的每个组件提供某种 ID:
<CardWeather />
<Forecast/>
<WeatherGrapth/>
<WeatherMap/>
您可以为每个组件通过 props 传递 id。示例:
主要成分:
<CardWeather id="1" />
CardWeather 组件:
function CardWeather(props){
const id = props.id
...
return(
<div data-id={id}>
...
</div>
)
}
...
而且您必须为每个要拖放的组件执行此操作。
- 嗨,为此您还需要使用从 '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>