reactjs - 使用 Styled 组件和 rc-year-calendar 做出反应

Question

我创建了 div 组件以做出反应，当我将鼠标悬停在它们上时，我需要突出显示日历“rc-year-calender”中的日期范围

我不知道该怎么做

这是日历反应代码，其中包含当反应组件'Campagincard'悬停时需要突出显示的数据源

import React from 'react';
import styled from "styled-components";
import Calendar from 'rc-year-calendar';

function YearCalendar() {

    const currentYear = new Date().getFullYear();
  
  return (
    <Container>

<Calendar
    displayHeader={false}
    style= {"custom"}
    dataSource={[
                {
                  startDate: new Date(currentYear, 1, 4),
                  endDate: new Date(currentYear, 1, 15)
                },
                {
                  startDate: new Date(currentYear, 3, 5),
                  endDate: new Date(currentYear, 5, 15)
                }
              ]}
customDataSourceRenderer={(element) => [element.style.backgroundColor='rgba(0,0,0,0.55)',element.style.borderRadius='50px']
    }
/>

    </Container>
  );
}


const Container = styled.div`
width: 550px;
font-size: 10px;

`;

export default YearCalendar;

这是需要悬停的 div 组件“Campagincard”代码 -

import React from "react";
import styled from "styled-components";
import Campagincard from "./Campaigncard";

const Menucamapignsbox = () => {
    return (
       <Container>
           <Subcontainer>
               <p>Active Campaigns</p>
               <Status style={{backgroundColor:'#12B783'}}></Status>
               </Subcontainer>
       <ScrollContainer className="scroll-container">

           <Align>
<Campagincard />
<Campagincard />
<Campagincard />

</Align>

           </ScrollContainer>

       </Container>
    );
};


const Container = styled.div`
position: absolute;
  top: 50%;
  left: 20px;
  //background-color: rgb(0, 0, 0,0.4);
  
  p{
  color: white;
  margin-top: 10px;
  margin-left: 5px !important;
  }
  
`;

const Status = styled.div`
height: 10px;
width: 10px;
background-color: #12B783;
border-radius: 10px;
margin-top: 13px;
margin-left: 10px;
`;

const Subcontainer = styled.div`
display: flex;

`;
const Align = styled.div`
display: inline-flex;
margin-right: 30px;
width: 550px;//688px;
overflow-x: auto; 
overflow-y: auto; 
padding-bottom: 10px;
    cursor: grab;
`;


export default Menucamapignsbox;

因此，当将鼠标悬停在“组件”上时，它应该突出显示 rc-year-calendar 中的日期范围.. 可能有些东西我没有正确连接.. 我只是想要一种方法来连接两个反应组件，以便它们交互

提前致谢

标签： reactjscalendarstyled-components