04/19-选项卡.html

时间：2019-10-11 12:57:17 收藏：0 阅读：94

<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>