我的组件是一个包含主要和次要导航的标题。到目前为止,我只处理主要导航,它在网站的大部分区域之间进行选择。状态提升到主 Header 组件,而 UpperMenu 组件仅接收事件侦听器和活动链接 ID 作为道具。
问题在于,虽然状态更改正确进行,但在执行挂载时,状态会更改回初始值。这会导致 CSS 中的“闪烁”,这意味着视图被正确呈现,并且在片刻之后它会回到被选择的初始链接。我不知道什么可能导致这种行为,并希望得到帮助。
页眉.js:
import React from 'react';
import UpperMenu from './UpperMenu';
import TopHeader from './TopHeader';
import styles from './Header.css';
const sections = [
["/sec0","section0"],
["/sec1","section1"],
["/sec2","section2"]
];
class Header extends React.Component {
constructor(props){
super(props);
this.state = {section: 0,
submenu: 0};
}
// HERE THE STATE IS SET CORRECTLY
onSectionClick(event){
console.log(event.target.id);
this.setState({section:event.target.id[8]},
function () {console.log(this.state);});
}
// HERE PROBLEMS OCCUR, STATE IS INITIAL
componentDidMount(){
console.log(this.state);
}
render() {
return (
<header id={styles.header}>
<TopHeader />
<UpperMenu sections={sections}
activeSection={sections[this.state.section][1]}
onSectionClick={this.onSectionClick.bind(this)}/>
</header>
);
};
}
export default Header;
UpperMenu.js:
import React from 'react';
import styles from './UpperMenu.css';
import {Link} from 'react-router';
class UpperMenu extends React.Component{
render(){
var activeSection = this.props.activeSection;
var onSectionClick = this.props.onSectionClick;
var sectionIndex = -1;
return(
<div className={styles.mmenu}>
<ul className={styles.normal}>
{this.props.sections.map(function(section){
sectionIndex++;
return(
<li key={section[1]}
id={"section_" + sectionIndex}
className={(activeSection === section[1]) ? styles.active : ""}
onClick={onSectionClick}>
<a id={"section_" + sectionIndex + "_a"}
href={section[0]}>{section[1]}</a>
</li>
)})}
</ul>
</div>);
}
}
export default UpperMenu;
PS我试图调试生命周期以确定发生这种情况的时间点,问题从componentDidMount开始。