<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内容‘},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>总结
以上是内存溢出为你收集整理的04/19-选项卡.html全部内容，希望文章能够帮你解决04/19-选项卡.html所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）