我有一个菜单的标头组件，单击扩展按钮以显示li的所有文本时我想要。同样，当鼠标悬停在每个li上时，该li的文本也应显示。
这是我的代码
import React, { Component } from "react";
import Menuitems from "./menu_items";
class Header extends Component {
constructor() {
super();
/* This will go to the margin left of main
state={
mainOffset=50
}*/
this.state = {
width: 50,
title: ">>",
expandbutton: {
transformButton: "translateX(0)"
},
opacity: 0
};
this.expandMenu = this.expandMenu.bind(this);
}
expandMenu = () => {
if (this.state.width === 200) {
this.setState({
width: 50,
title: ">>",
expandbutton: {
transformButton: "translateX(0)"
},
opacity: 0
});
} else {
this.setState({
width: 200,
title: "<<",
expandbutton: {
transformButton: "translateX(340%)"
},
opacity: 1
});
}
};
render() {
return (
<div
className="navbar"
style={{
height: `${window.innerHeight}px`,
width: `${this.state.width}px`,
backgroundColor: "white",
position: "fixed",
zIndex: 999,
display: "flex",
alignItems: "flex-end",
justifyContent: "space-between",
flexDirection: "column",
transition: "width 0.5s ease"
}}
>
<div
className="ul_wrapper"
style={{
width: "100%",
height: `${window.innerHeight / 3}px`
}}
>
<ul
style={{
listStyle: "none",
padding: "0",
margin: "0",
width: "100%",
height: "100%"
}}
>
<Menuitems
desc="Home"
opacity={this.state.opacity}
onClick={console.log}
>
<svg viewBox="0 0 50 50" width="30" height="30">
<path d="M 24.962891 1.0546875 A 1.0001 1.0001 0 0 0 24.384766 1.2636719 L 1.3847656 19.210938 A 1.0005659 1.0005659 0 0 0 2.6152344 20.789062 L 4 19.708984 L 4 46 A 1.0001 1.0001 0 0 0 5 47 L 18.832031 47 A 1.0001 1.0001 0 0 0 19.158203 47 L 30.832031 47 A 1.0001 1.0001 0 0 0 31.158203 47 L 45 47 A 1.0001 1.0001 0 0 0 46 46 L 46 19.708984 L 47.384766 20.789062 A 1.0005657 1.0005657 0 1 0 48.615234 19.210938 L 41 13.269531 L 41 6 L 35 6 L 35 8.5859375 L 25.615234 1.2636719 A 1.0001 1.0001 0 0 0 24.962891 1.0546875 z M 25 3.3222656 L 44 18.148438 L 44 45 L 32 45 L 32 26 L 18 26 L 18 45 L 6 45 L 6 18.148438 L 25 3.3222656 z M 37 8 L 39 8 L 39 11.708984 L 37 10.146484 L 37 8 z M 20 28 L 30 28 L 30 45 L 20 45 L 20 28 z" />
</svg>
</Menuitems>
<Menuitems desc="About Me" opacity={this.state.opacity}>
<svg viewBox="0 0 50 50" width="30" height="30">
<g id="surface1">
<path d="M 24.875 3.3125 C 20.183594 3.417969 17.214844 5.316406 15.9375 8.25 C 14.722656 11.042969 14.976563 14.5625 15.84375 18.21875 C 15.378906 18.765625 14.996094 19.535156 15.09375 20.6875 L 15.09375 20.75 C 15.261719 21.96875 15.628906 22.828125 16.09375 23.4375 C 16.316406 23.726563 16.632813 23.742188 16.90625 23.90625 C 17.148438 25.269531 17.691406 26.570313 18.3125 27.59375 C 18.34375 27.742188 18.40625 27.878906 18.5 28 C 18.5 28 18.601563 28.128906 18.625 28.15625 C 18.9375 28.625 19.09375 29.277344 19.09375 30 C 19.09375 30.769531 19.082031 31.484375 19 32.28125 C 18.699219 33.039063 17.949219 33.644531 16.75 34.25 C 15.496094 34.882813 13.855469 35.464844 12.1875 36.1875 C 10.519531 36.910156 8.828125 37.777344 7.46875 39.15625 C 6.109375 40.535156 5.136719 42.445313 5 44.9375 L 4.9375 46 L 45.0625 46 L 45 44.9375 C 44.863281 42.445313 43.914063 40.539063 42.5625 39.15625 C 41.210938 37.773438 39.511719 36.910156 37.84375 36.1875 C 36.175781 35.464844 34.523438 34.886719 33.25 34.25 C 32.015625 33.632813 31.242188 33.003906 30.90625 32.21875 C 30.828125 31.273438 30.8125 30.527344 30.8125 29.6875 C 30.8125 29.152344 30.996094 28.667969 31.3125 28.1875 C 31.320313 28.175781 31.335938 28.167969 31.34375 28.15625 C 31.347656 28.148438 31.40625 28.09375 31.40625 28.09375 C 31.53125 27.964844 31.617188 27.800781 31.65625 27.625 C 32.261719 26.585938 32.765625 25.265625 33 23.9375 C 33.3125 23.773438 33.664063 23.753906 33.90625 23.4375 C 34.386719 22.808594 34.667969 21.914063 34.78125 20.6875 C 34.871094 19.628906 34.566406 18.859375 34.09375 18.28125 C 34.613281 16.679688 35.230469 14.117188 35.03125 11.5 C 34.921875 10.0625 34.542969 8.628906 33.6875 7.4375 C 32.914063 6.359375 31.664063 5.621094 30.09375 5.28125 C 29.035156 3.867188 27.113281 3.3125 24.90625 3.3125 Z M 24.90625 5.3125 C 24.917969 5.3125 24.925781 5.3125 24.9375 5.3125 C 26.933594 5.320313 28.210938 5.882813 28.625 6.59375 L 28.875 7.03125 L 29.375 7.09375 C 30.75 7.285156 31.503906 7.816406 32.0625 8.59375 C 32.621094 9.371094 32.941406 10.457031 33.03125 11.65625 C 33.214844 14.058594 32.519531 16.875 32.0625 18.15625 L 31.75 19 L 32.53125 19.40625 C 32.523438 19.433594 32.851563 19.765625 32.8125 20.5 C 32.8125 20.515625 32.8125 20.515625 32.8125 20.53125 C 32.71875 21.472656 32.476563 22.003906 32.3125 22.21875 C 32.144531 22.4375 32.058594 22.40625 32.09375 22.40625 L 31.21875 22.40625 L 31.09375 23.28125 C 30.921875 24.578125 30.261719 26.210938 29.6875 27.03125 L 29.65625 27.03125 C 29.597656 27.117188 29.554688 27.21875 29.5 27.3125 C 29.238281 27.617188 28.84375 28.019531 28.28125 28.5 C 27.347656 29.296875 26.109375 30 25 30 C 23.898438 30 22.648438 29.261719 21.6875 28.4375 C 20.855469 27.722656 20.359375 27.109375 20.21875 26.9375 C 20.214844 26.929688 20.222656 26.914063 20.21875 26.90625 C 19.628906 26.054688 18.953125 24.5625 18.78125 23.28125 L 18.6875 22.40625 L 17.875 22.40625 C 17.839844 22.390625 17.746094 22.339844 17.65625 22.21875 C 17.480469 21.988281 17.230469 21.449219 17.09375 20.53125 C 17.09375 20.511719 17.09375 20.519531 17.09375 20.5 C 17.089844 20.484375 17.097656 20.484375 17.09375 20.46875 C 17.078125 19.710938 17.546875 19.289063 17.46875 19.34375 L 18.03125 18.9375 L 17.875 18.25 C 16.953125 14.605469 16.808594 11.304688 17.78125 9.0625 C 18.753906 6.828125 20.722656 5.414063 24.90625 5.3125 Z M 21.09375 30.53125 C 22.148438 31.308594 23.46875 32 25 32 C 26.5 32 27.785156 31.34375 28.8125 30.59375 C 28.816406 31.203125 28.835938 31.828125 28.90625 32.59375 L 28.90625 32.71875 L 28.96875 32.84375 C 29.144531 33.304688 29.394531 33.695313 29.6875 34.0625 C 29.675781 34.101563 29.664063 34.144531 29.65625 34.1875 C 29.65625 34.1875 29.417969 34.84375 28.71875 35.5625 C 28.019531 36.28125 26.933594 37 25 37 C 23.074219 37 21.949219 36.25 21.21875 35.5 C 20.488281 34.75 20.25 34.0625 20.25 34.0625 C 20.539063 33.6875 20.777344 33.285156 20.9375 32.8125 L 21 32.625 C 21.085938 31.867188 21.09375 31.183594 21.09375 30.53125 Z M 31.25 35.4375 C 31.601563 35.664063 31.964844 35.875 32.34375 36.0625 C 33.804688 36.789063 35.460938 37.351563 37.03125 38.03125 C 38.601563 38.710938 40.066406 39.480469 41.125 40.5625 C 41.96875 41.425781 42.476563 42.574219 42.75 44 L 7.25 44 C 7.523438 42.574219 8.027344 41.425781 8.875 40.5625 C 9.9375 39.480469 11.429688 38.710938 13 38.03125 C 14.570313 37.351563 16.210938 36.792969 17.65625 36.0625 C 18.015625 35.878906 18.382813 35.6875 18.71875 35.46875 C 18.941406 35.871094 19.285156 36.394531 19.78125 36.90625 C 20.800781 37.957031 22.527344 39 25 39 C 27.464844 39 29.15625 37.96875 30.15625 36.9375 C 30.703125 36.375 31.035156 35.851563 31.25 35.4375 Z " />
</g>
</svg>
</Menuitems>
<Menuitems desc="Resume" opacity={this.state.opacity}>
<svg viewBox="0 0 50 50" width="30" height="30">
<g id="surface1">
<path d="M 7 2 L 7 48 L 43 48 L 43 14.59375 L 42.71875 14.28125 L 30.71875 2.28125 L 30.40625 2 Z M 9 4 L 29 4 L 29 16 L 41 16 L 41 46 L 9 46 Z M 31 5.4375 L 39.5625 14 L 31 14 Z M 15 22 L 15 24 L 35 24 L 35 22 Z M 15 28 L 15 30 L 31 30 L 31 28 Z M 15 34 L 15 36 L 35 36 L 35 34 Z " />
</g>
</svg>
</Menuitems>
<Menuitems desc="Portfolio" opacity={this.state.opacity}>
<svg viewBox="0 0 50 50" width="30" height="30">
<g id="surface1">
<path d="M 20 3 C 18.355469 3 17 4.355469 17 6 L 17 9 L 3 9 C 1.355469 9 0 10.355469 0 12 L 0 26.8125 C -0.0078125 26.875 -0.0078125 26.9375 0 27 L 0 44 C 0 45.644531 1.355469 47 3 47 L 47 47 C 48.644531 47 50 45.644531 50 44 L 50 12 C 50 10.355469 48.644531 9 47 9 L 33 9 L 33 6 C 33 4.355469 31.644531 3 30 3 Z M 20 5 L 30 5 C 30.5625 5 31 5.4375 31 6 L 31 9 L 19 9 L 19 6 C 19 5.4375 19.4375 5 20 5 Z M 3 11 L 47 11 C 47.5625 11 48 11.4375 48 12 L 48 26.84375 C 48 26.875 48 26.90625 48 26.9375 L 48 27 C 48 27.5625 47.5625 28 47 28 L 3 28 C 2.4375 28 2 27.5625 2 27 C 2.007813 26.9375 2.007813 26.875 2 26.8125 L 2 12 C 2 11.4375 2.4375 11 3 11 Z M 25 22 C 23.894531 22 23 22.894531 23 24 C 23 25.105469 23.894531 26 25 26 C 26.105469 26 27 25.105469 27 24 C 27 22.894531 26.105469 22 25 22 Z M 2 29.8125 C 2.316406 29.925781 2.648438 30 3 30 L 47 30 C 47.351563 30 47.683594 29.925781 48 29.8125 L 48 44 C 48 44.5625 47.5625 45 47 45 L 3 45 C 2.4375 45 2 44.5625 2 44 Z " />
</g>
</svg>
</Menuitems>
<Menuitems desc="Contact" opacity={this.state.opacity}>
<svg viewBox="0 0 50 50" width="30" height="30">
<path d="M 41 2 C 37.145851 2 34 5.1458514 34 9 C 34 10.842988 34.724355 12.518937 35.896484 13.771484 L 27.525391 24 L 15.919922 24 C 15.430748 20.617539 12.513828 18 9 18 C 5.1458514 18 2 21.145851 2 25 C 2 28.854149 5.1458514 32 9 32 C 12.513828 32 15.430748 29.382461 15.919922 26 L 27.501953 26 L 35.535156 36.640625 C 34.5767 37.838633 34 39.353257 34 41 C 34 44.854149 37.145851 48 41 48 C 44.854149 48 48 44.854149 48 41 C 48 37.145851 44.854149 34 41 34 C 39.515247 34 38.13907 34.471256 37.003906 35.265625 L 29.271484 25.025391 L 37.455078 15.021484 C 38.496931 15.638103 39.706395 16 41 16 C 44.854149 16 48 12.854149 48 9 C 48 5.1458514 44.854149 2 41 2 z M 41 4 C 43.773268 4 46 6.2267316 46 9 C 46 11.773268 43.773268 14 41 14 C 38.226732 14 36 11.773268 36 9 C 36 6.2267316 38.226732 4 41 4 z M 9 20 C 11.773268 20 14 22.226732 14 25 C 14 27.773268 11.773268 30 9 30 C 6.2267316 30 4 27.773268 4 25 C 4 22.226732 6.2267316 20 9 20 z M 41 36 C 43.773268 36 46 38.226732 46 41 C 46 43.773268 43.773268 46 41 46 C 38.226732 46 36 43.773268 36 41 C 36 38.226732 38.226732 36 41 36 z" />
</svg>
</Menuitems>
</ul>
</div>
<div
style={{
width: this.state.width,
height: "50px",
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "gray",
color: "white",
position: "relative",
paddingLeft: this.state.buttonPadding,
transition: "all 0.5s ease",
cursor: "pointer"
}}
onClick={this.expandMenu}
>
<div
style={{
transform: this.state.expandbutton.transformButton,
transition: "all 0.5s ease",
letterSpacing: " -3px",
fontSize: " 18px"
}}
>
{this.state.title}
</div>
</div>
</div>
);
}
}
export default Header;
包含整个li的成分 从'react'导入React； 从“ ./Menuitemsdesc”导入Menuitemsdesc
class Menuitems extends React.Component{
constructor(props){
super();
this.state = {
desc_opacity:props.opacity
}
}
render(){
const handleEnter = () => {
console.log("Entered")
this.setState({
desc_opacity:1
})
}
const handleLeave = () => {
console.log("Left")
this.setState({
desc_opacity:0
})
}
return (
<li className="menu_items" onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
<div className="flex-center">
{this.props.children}
</div>
<Menuitemsdesc desc={this.props.desc} opacity={this.props.opacity} />
</li>
)
}
}
export default Menuitems;
包含li的描述的我的组件 从“反应”导入React
const Menuitemsdesc = (props) =>{
return (
<div className="flex-center">
<p style={{
paddingLeft:"15px",
opacity:props.opacity,
transition:"opacity 0.5s ease"
}}>{props.desc}</p>
</div>
)
}
export default Menuitemsdesc;