Clique comutação Reagir para alcançar guias

I. Primeiro Showcase

Veja a caneta reagir-tabs por Wang Chao ( @charleyw ) em CodePen .

Em segundo lugar, como conseguir

Desde a escrita Reagir, então deve ser um componente, primeiro pense em como você usar esse componente, que é a interface deste componente é como.

<TabsControl>
  <Tab name="red">
    <div className="red"/>
  </Tab>
  <Tab name="blue">
    <div className="blue"/>
  </Tab>
  <Tab name="yellow">
    <div className="yellow"/>
  </Tab>
</TabsControl>

Este TabsControlé um elemento pai que controla Tabcomo o interruptor Tabé usado para embrulhar o verdadeiro conteúdo a ser exibido, sua namepropriedade é o nome da guia será exibida na guia barra de título.

Em terceiro lugar, criar elementos básicos

De acordo com as idéias anteriores, Tabdefiniu uma série de guias, precisamos da barra de título e conteúdo com base nesses guia de compilação personalizada.

1. atravessando this.props.childrenbarra de título gerado dinamicamente

this.props.childrenReagir é uma propriedade interna para a obtenção de elementos filhos. Porque pode haver um sub-elemento ou matriz de objectos, de modo Reagir proporciona um método de processamento suplementar para a travessia de crianças:React.Children.map

Assim, o título gerado dinamicamente código pode ser assim:

React.Children.map(this.props.children, (element, index) => {
    return (<div className="tab-title-item">{element.props.name}</div>)

2. Usando o mesmo método para gerar etiquetas de conteúdo da página

React.Children.map(this.props.children, element => {
    return (element)
})

Juntos é TabsControla realização:

let TabsControl = React.createClass({
  render: function () {
    let that = this;
    let {baseWidth} = this.props;
    let childrenLength = this.props.children.length;
    return (
      <div>
        <nav className="tab-title-items">
          {React.Children.map(this.props.children, (element, index) => {
            return (<div className="tab-title-item">{element.props.name}</div>)
          })}
        </nav>
        <div className="tab-content-items">
          {React.Children.map(this.props.children, element => {
            return (element)
          })}
        </div>
      </div>
    )
  }
});

Além de alguns css você pode ver um protótipo da guia.

Em terceiro lugar, para alcançar um switcher guia

Aqui o conceito mais importante reagir a emergiu state, stateé um Javascript-Object, que é usado para representar o estado atual de montagem, se TabsControl, por exemplo, então ele statepode estar presente no estado ativo número guia (claro, se você quiser então você pode salvar a guia conteúdo).
Reagir fornece uma maneira setState()para que você possa mudar o statevalor. Cada chamada setState()irá acionar o componente render(), esse componente irá representar atualizações DOM para stateestado representa.

Portanto, a chave para mudar o seguinte:

1. stateSalve o número de guia ativo no momento

2. Clique no título quando a chamada setState()para atualizar o número da página aba ativa

3. render()Ao navegar o this.props.childrentempo do número e statedo número de elementos marca idênticaactive

4. Com não-css activeelementos escondidos

Assim, o código é a seguinte:

let TabsControl = React.createClass({
  getInitialState: function(){
    return {currentIndex: 0}
  },
  
  getTitleItemCssClasses: function(index){
    return index === this.state.currentIndex ? "tab-title-item active" : "tab-title-item";
  },
  
  getContentItemCssClasses: function(index){
    return index === this.state.currentIndex ? "tab-content-item active" : "tab-content-item";
  },
  
  render: function(){
    let that = this;
    let {baseWidth} = this.props;
    let childrenLength = this.props.children.length;
    return (
      <div>
        <nav className="tab-title-items">
          {React.Children.map(this.props.children, (element, index) => {
            return (<div onClick={() => {this.setState({currentIndex: index})}} className={that.getTitleItemCssClasses(index)}>{element.props.name}</div>)
          })}
        </nav>
        <div className="tab-content-items">
          {React.Children.map(this.props.children, (element, index) => {
            return (<div className={that.getContentItemCssClasses(index)}>{element}</div>)
          })}  
        </div>
      </div>
    )
  }
});

getInitialState: Componente estado de inicialização, o padrão é o primeiro guia está ativo.
getTitleItemCssClasses: Determinar o rótulo atual e stateo número de etiqueta, se tiver sido salvo, ele é identificado como active.
getContentItemCssClasses: Mesmo que acima.
onClick={() => {this.setState({currentIndex: index})}}: Título Tab clique bound evento, cada atualização clique statepara salvar o número de guia, em seguida, acionar o render()guia método de redesenho.

IV Resumo

O resultado final de uma série de operações do acima são necessários render()para ser reflectida, de modo que o ponto chave é a forma render()de usar o stateDOM gerados de forma dinâmica.

A próxima melhoria

A implementação pode deslizar a guia