style .active { color : red } / style / head body div id ="root" / div script src =‘./babel.min.js‘ / script script src =‘./react.js‘ / script script src =‘./react-dom.js‘ / script script type ="text/babel" class App extends Rea
<style> .active{ color:red } </style> </head> <body> <div id="root"></div> <script src=‘./babel.min.js‘></script> <script src=‘./react.js‘></script> <script src=‘./react-dom.js‘></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) this.header=[‘选项卡1‘,‘选项卡2‘,‘选项卡3‘] this.content=[‘选项1内容‘,‘选项2内容‘,‘选项3内容‘] this.state={ index:0, } } change=(e)=>{ this.setState({ msg:e.target.value }) } changeIndex=(i)=>{ this.setState({ index:i }) } render(){ console.log(this.header) return ( <div> <Header content={this.header} changeIndex={this.changeIndex} /> <Box content={this.content} index={this.state.index} /> </div> ) } } class Header extends React.Component{ constructor(props){ super(props) this.state={ index:0, active:‘active‘ } } changeIndex=(index)=>{ const {changeIndex}=this.props changeIndex(index) this.setState({index:index}) } render(){ const{content}=this.props return ( <div> { content.map((val,idx)=>{ return(<button onClick={()=>{this.changeIndex(idx)} } className={this.state.index==idx?this.state.active:‘‘} key={idx}>{val}</button>) }) } </div> ) } } class Box extends React.Component{ render(){ const index=this.props.index.toString() return( <div> {index && this.props.content[index]} </div> ) } } ReactDOM.render(<App />,document.getElementById(‘root‘)) </script>
20-选项卡
<style> .active{ color:red } </style> </head> <body> <div id="root"></div> <script src=‘./babel.min.js‘></script> <script src=‘./react.js‘></script> <script src=‘./react-dom.js‘></script> <script type="text/babel"> class App extends React.Component{ constructor(props){ super(props) this.header= [{index:1,title:‘选项卡1‘},{index:2,title:‘选项卡2‘},{index:3,title:‘选项卡3‘}] this.content= [{index:1,content:‘选项1内容‘},{index:1,content:‘选项2内容‘},{index:1,content:‘选项3内容‘}] this.state={ index:0, } } change=(e)=>{ this.setState({ msg:e.target.value }) } changeIndex=(i)=>{ this.setState({ index:i }) } render(){ return ( <div> <Header content={this.header} changeIndex={this.changeIndex} /> <Box content={this.content} index={this.state.index} /> </div> ) } } class Header extends React.Component{ constructor(props){ super(props) this.state={ active:‘active‘, index:0 } } changeIndex=(index)=>{ const {changeIndex}=this.props changeIndex(index) this.setState({index:index}) } render(){ const{content}=this.props //className是变化的，要刷新视图的，变化的数据不能用数据源来做判断，用state来刷新视图 return ( <div> { content.map((val,idx)=>{ return(<button onClick={()=>{this.changeIndex(idx)} } className={this.state.index==idx?this.state.active:‘‘} key={idx}>{val.title}</button>) }) } </div> ) } } class Box extends React.Component{ render(){ const index=this.props.index return( <div> {index.toString() && this.props.content[index].content} </div> ) } } ReactDOM.render(<App />,document.getElementById(‘root‘)) </script>