Jquery implemented in the navigation bar to switch needs only one line of code to find the same level of other elements removeClass and click Add addClass elements can be achieved, but not directly to React sibling elements, this time need a little thinking js in accordance with the added Analyzing the sequence number which is added className
In order to facilitate the test examples, which I direct reference to the online file rookie tutorial, you can directly paste the code to run
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.change{background-color: #ff6637;float:left;width: 120px;height: 50px;;line-height: 50px;text-align: center;color: #fff;margin-right: 20px;}
.type{float:left;width: 120px;height: 50px;;line-height: 50px;text-align: center;color: #fff;margin-right: 20px;background-color: #2b2b2b;}
</style>
</head>
<body>
<div id="box" style="width: 100%;height:50px;background:#2b2b2b;"></div>
<script type="text/babel">
class Nav extends React.Component {
constructor(props){
super(props);
this.state={currentIndex:0};
}
setCurrentIndex=(event)=>{
this.setState({
// parseIndex () has two parameters, the second parameter represents a hexadecimal value is parsed, and returns the corresponding decimal number
//event.currentTarget.getAttribute('index '), to get the current serial number and converts it into number by event
currentIndex: parseInt(event.currentTarget.getAttribute('index'), 10)
})
}
render(){
let content = [ "Home", "About Us," "customer case", "news", "our team", "Contact Us"];
let newContent = [];
for(let i = 0; i < content.length; i++) {
// key attribute identifies the different elements, reducing performance overhead in the case of an element of uncertainty
// react not pinpoint the location of specific elements of change in the comparison element sub-elements are the same time, only to be found later on after all the different elements all executed once dom update operation.
// tree1
//<ul>
//<li key="1">1</li>
//<li key="2">2</li>
//</ul>
//tree2
//<ul>
//<li key="1">1</li>
//<li key="3">3</li>
//<li key="2">2</li>
//</ul>
// updates for the insertion, directly into React but will not remove the second subelement and then add the remaining elements, but if coupled with a key attribute identification, direct insert operation will be
newContent.push(<div key={i}
= {className? this.state.currentIndex === I 'Change': 'type'}
// determines whether the current update sequence number identical, to replace className
index={i} onClick={this.setCurrentIndex}
>{content[i]}</div>);
}
return(
<div style={{width:"1200px",height:"50px",margin:"auto"}}>{newContent}</div>
)
}
}
ReactDOM.render(
<Nav />,
document.getElementById('box')
);
</script>
</body>
</html>