将react组件移动到另一个组件

jobtbby3 于 2021-09-23 发布在 Java

关注(0)|答案(2)|浏览(451)

我正在做一个React。下面的代码是一个示例。arrayexample被Map并返回到 div 组成部分。每当我单击Map的 div 组件，我要更改
div (position: 'absolute') 并将其根据贴图放置在右侧 div 上边界。有办法吗？我想像动画一样平滑地移动它。

import React from "react";

    const sample = () => {
        const arrayExample = ["AAAA", "BBBB", "CCCC"];
        return (
            <div
                style={{
                    display: "flex",
                    flexDirection: "column",
                    width: "100%",
                    height: "500px",
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "#f3f3f3",
                }}
            >
                {arrayExample.map((v, i) => {
                    return (
                        <div
                            style={{
                                width: "50%",
                                padding: 50,
                                border: "1px solid black",
                                marginTop: 15,
                            }}
                            onClick={() => {
                                console.log("Event!")
                            }}
                        >
                            {v}
                        </div>
                    );
                })}
                <div style={{position: 'absolute', top: 70, right: '22%', backgroundColor: "#4285F4", width: 50, height: 150, borderRadius: 5}}>
                    moving screen(I want to Change top value)
                </div>
            </div>
        );
    };

    export default sample;

JavaScript reactjs

来源：https://stackoverflow.com/questions/68310519/move-react-component-to-another-component

2条答案

按热度按时间

7xllpg7q1#

单击项目div时，您需要计算出该div与顶部的距离，然后更改 top 您的右div的css属性。要找到此距离，可以使用 offsetTop 财产。对于动画，可以使用 transition 财产。代码如下：

import React, { useRef } from "react";

const Sample = () => {
    const arrayExample = ["AAAA", "BBBB", "CCCC"];
    const rightDiv = useRef();
    const itemClickHandler = (i) => {
      const newTopHeight = document.getElementById("container").children[i].offsetTop;
      rightDiv.current.style.top = newTopHeight + 'px';
    }
    return (
        <div
            id="container"
            style={{
                display: "flex",
                flexDirection: "column",
                width: "100%",
                height: "500px",
                alignItems: "center",
                justifyContent: "center",
                backgroundColor: "#f3f3f3",
            }}
        >
            {arrayExample.map((v, i) => {
                return (
                    <div
                        key={i}
                        style={{
                            width: "50%",
                            padding: 50,
                            border: "1px solid black",
                            marginTop: 15,
                        }}
                        onClick={() => itemClickHandler(i)}
                    >
                        {v}
                    </div>
                );
            })}
            <div 
              ref={rightDiv}
              style={{
                position: 'absolute', 
                top: 70, 
                right: '22%', 
                backgroundColor: "#4285F4", 
                width: 50, 
                height: 150, 
                borderRadius: 5,
                transition: "top 0.5s ease-in-out"
              }}>
                moving screen(I want to Change top value)
            </div>
        </div>
    );
};
export default Sample;

您可以在此处看到这一点：https://codesandbox.io/s/thirsty-curie-7mskj

赞(0）回复(0）举报 2021-09-23

gfttwv5a2#

在单击处理程序中，您可以获得px中单击的div的当前位置，您可以轻松地用谷歌搜索如何做到这一点（相对于页面，而不是相对于视口）。我建议将该值存储在state中，称之为activeitemoffsettop，然后将其设置为当前状态

赞(0）回复(0）举报 2021-09-23