La mejor manera de crear pestañas contenido de componentes, la carpeta, la estructura método

votos
0

Estoy tratando de construir un componente de contenido con pestañas pero no está seguro sobre la mejor manera de proceder con esto.

Tengo una matriz de objetos tales como debajo de la cual puede tomar en cualquier número

tabs= {[
  {
    title: Some title 1,
    otherComponents: [
      <Title ... />,
      <Paragraph... />
    ]
  },
    ...
    ...
    ...
}]

Tengo la sensación de que necesito para centrarse en primer lugar sobre la visualización del tab.title y luego mostrar los tab.contents en otherComponents. pero no está seguro de cómo iba a vincular los dos juntos en poder identificar la pestaña activa y qué contenidos para que aparezca .. Cualquier ayuda en la estructura de carpetas para estos componentes y qué tipo de función sería necesario apostar sería muy apreciada como yo' no estoy seguro sobre el mejor enfoque para esto. ¿Qué le sugeriría a centrarse en primer lugar?

Yo diría que la siguiente función: getTabHeadersy getTabContentsy luego mostrarlos a continuación uno del otro?

Tengo la siguiente estructura de carpetas debajo

-tabbed de contenido -tabbed-content.js -Tab-content.js -Tab-headers

No estoy seguro si todos ellos deben entrar en el archivo principal que es tabbed-content.

en el tabbed-contentque tengo algo como lo siguiente

  getTabbedContent() {
    const {
    tabs,
  } = this.props;

  const numberOfTabs = Object.keys(tabs).length;

  return (
    <StyledTabbedContent>
      { tabs.map((tab, index) => (
        <TabHeader
          key={uuidv1()}
          title={tab.title}
          tabNumber={1+ index}
          numberOfTabs={numberOfTabs}
        />
        ),
      )}
    </StyledTabbedContent>
  );
  }

en tab-headerTengo el siguiente

  render() {
    const { numberOfTabs, title } = this.props;
    return (
      <StyledTab 
        numberOfTabs={numberOfTabs}
      >
          <StyledTitle>{title}</StyledTitle>
      </StyledTab>     
    ) 
  }
}

Lo que era pensar estaba teniendo en tab-contentalgo similar al acoplamiento de la identificación howd anteriormente, pero no está seguro de los dos de ellos juntos ... lo que me hace pensar que voy por el camino equivocado ... Es por eso que estoy pidiendo un estructura de la estructura de carpetas / método o un plan sobre qué hacer primero para abordar el problema

Publicado el 20/10/2018 a las 10:38
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
1

Yo recomendaría usted para crear un componente más genérico Tabbar. En su aplicación es posible que desee hacer lo siguiente:

<TabbedContent>
  <div label="Tab 1"> ... individual content goes here ... </div>
  <div label="Tab 2"> ... individual content goes here ... </div>
  <div label="Tab 3"> ... individual content goes here ... </div>
</TabbedContent>

El componente TabbedContent continuación, se encarga del resto:

  1. los niños análisis sintáctico
  2. crear fichas de propiedad label
  3. el manejo de la lógica clic
  4. Sí, su puede utilizar componentes de estilo

Para este ejemplo no voy a utilizar las referencias a reaccionar y lo haré de la manera hacky con .bind. POR FAVOR, debe solucionar esto por sí mismo;) Esto es sólo para empujar en la dirección correcta. Si usted tiene una versión sin .bind se podía actualizar mi post :)

Su componente TabbedContent debería tener este aspecto:

export default class TabbedContent extends Component {
  constructor(props) {
    super(props)

    // get the label from the first child
    const { children } = this.props
    const firstChild = children && children[0] 

    if (firstChild){
      // save active label in state
      const { label } = firstChild.props
      this.state = { activeTab: label }
    }

  }

}

El método de procesamiento de TabbedContent debe devolver la siguiente:

const {
  onClickTabItem,
  props: { children },
  state: { activeTab },
} = this

return (
<Tabs>
  <TabList>
    {children.map((child) => {
      const { label } = child.props
      return (
        <Tab
          active={label === activeTab}
          key={label}
          onClick={onClickTabItem.bind(this, label)}
        >
          {label}
        </Tab>
      )
    })}
  </TabList>
  <TabContent>
    {children.map((child) => {
      if (child.props.label !== activeTab) return undefined
      return child.props.children
    })}
  </TabContent>
</Tabs>
)

Añadir un método onClickTabItem al componente y establecer el estado, cada vez que su conseguir llamados;

onClickTabItem = (tab) => {
  this.setState({ activeTab: tab })
}

Su Tabcomponente de estilo debe implementar un comportamiento de la propiedad active:

${props => props.active && css`
  background: black;
  color: white;
`}
Respondida el 20/10/2018 a las 18:44
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more