Intente mostrar accesorios del componente de reacción. Necesito mostrar el nombre de las pestañas Haz esto.
import React from 'react' import { Link, browserHistory } from 'react-router' import Tabs from '../../components/Tabs/Tabs' function Revenue ({ children }) { return ( <div> <div> <Tabs items = { ['Home', 'Services', 'About', 'Contact us'] } /> </div> <div className="cont-position">{children}</div> </div> ) } export default RevenueTabulaciones.js
import React from 'react' import { Link, browserHistory,IndexLink } from 'react-router' function Tabs () { var data = this.props.items; var newsTemplate; newsTemplate = data.map(function(item, index) { return ( <div key={index}> <li><Link to="/Revenue/IncomeOver" activeClassName="activelink">{item} </Link></li> </div> ) }) export default TabsPero obtenga el error: TypeError no capturado: no se puede leer la propiedad 'props' de undefined
Está utilizando los Stateless Function Components estado, por lo que en lugar de usar this.props , reciba los accesorios en el argumento de la función, intente esto, funcionará:
function Tabs (props) { var newsTemplate=[], data = props; data.items.forEach(function(item, index) { newsTemplate.push ( <div key={index}> <li>{item}</li> </div> ) }); return(<div>{newsTemplate}</div>); } verifique el jsfiddle para ver el ejemplo de trabajo: https://jsfiddle.net/4o6snef0/
consulte el artículo sobre Stateless Funcion Comp : https://www.reactenlightenment.com/react-state/8.4.html
Parece que está intentando escribir sus componentes como componentes funcionales sin estado . Como sugiere el nombre, sus componentes se escriben como funciones, no como clases. Por esta razón, no puede usar this .
Como tal, this no está definido, por lo tanto, su advertencia " no se puede leer la propiedad 'accesorios' de indefinido ".
Para acceder a sus accesorios, simplemente agregue eso como el parámetro de función en su función.
function Tabs (props) { var data = props.items; var newsTemplate; newsTemplate = data.map(function(item, index) { return ( <div key={index}> <li><Link to="/Revenue/IncomeOver" activeClassName="activelink">{item} </Link></li> </div> ) })