class Headers extends React.Component { render() { const selected = this.props.selectedPane; const headers = this.props.panes.map((pane, index) => { const title = pane.title; const klass = index === selected ? 'active' : ''; return ( <li key={index} className={klass} onClick={() => this.props.onTabChosen(index)}> {title}{' '} </li> ); }); return ( <ul className='tab-header'> {headers} </ul> ); } } export default class Tabs extends React.Component { constructor(props) { super(props); this.state = { selectedPane: 0 }; this.selectTab = this.selectTab.bind(this); } selectTab(num) { this.setState({selectedPane: num}); } render() { const pane = this.props.panes[this.state.selectedPane]; return ( <div> <h1>Tabs</h1> <div className='tabs'> <Headers selectedPane={this.state.selectedPane} //onTabChosen={this.selectTab} panes={this.props.panes}> </Headers> <div className='tab-content'> <article> hellooooo {pane.content} </article> </div> </div> </div> ); } }Actualmente estoy creando una sección de 3 pestañas donde, si hace clic en una pestaña, aparece un nuevo panel.
Al mirar la función de representación, veo una etiqueta personalizada llamada Headers .
Sé que proviene de la clase Headers al principio, pero ¿cómo funciona ese formato? ¿Es una etiqueta personalizada que estamos construyendo?
Además, cuando miro sus propiedades, como onTabChosen , cuando se elimina en el método de procesamiento (con fines de aprendizaje) y hago clic en una pestaña seleccionada, aparece un error que dice
"_this.props.onTabChosen no es una función".
this.props.onTabChosen(index).. fue escrito en la clase Headers pero no como una función correcta?
Supongo que porque también estoy confundido sobre cómo funciona this.props.onTabChosen(index) ya que onTabChosen nunca se declaró en ninguna parte, solo se ingresó después de los accesorios.
Al mirar la función de representación, veo una etiqueta personalizada llamada "Encabezados".
Eso no es una etiqueta personalizada . Ese es un componente React.
Sé que proviene de la clase Encabezados al principio, pero ¿cómo funciona ese formato?
Los Headers son una función o una clase (es decir, una función constructora).
Se llamará a la función y el primer argumento que se le pasará será un objeto con propiedades y valores que coincidan con los accesorios del elemento JSX.
Si va a usar React, lea un tutorial , este es un material de nivel muy introductorio para el marco.
Se cubre desde el principio tanto en el tutorial de MDN como en el tutorial oficial de React .
Supongo que porque también estoy confundido sobre cómo funciona this.props.onTabChosen (índice) ya que onTabChosen nunca se declaró en ninguna parte, solo se ingresó después de los accesorios.
Fue declarado, pero no en el fragmento de código que compartió.