Estoy trabajando en un proyecto de reacción en el que paso títulos contenidos en estados a un elemento secundario (ver parte inferior). ¿Cómo puedo agregar dinámicamente a la primera palabra (y solo la primera palabra porque mis títulos pueden contener 2 o 3 palabras) dentro de this.state.title dentro del elemento secundario?
//Parent
import React, { Component } from 'react';
import Child from './child';
class Parent extends Component {
state = {
title:'Admin Picture'
}
render() {
return (
<React.Fragment>
<Child title={this.state.title}>
</React.Fragment>
);
}
}
export default Parent;
//Child
import React, { Component } from 'react';
class Child extends Component {
render(){
return (
<div>
<span className="title">{this.props.title}</span>
</div>
);
}
};
export default Child;
Puede hacer esto en el componente Hijo.
//Child
import React, { Component } from 'react';
class Child extends Component {
render() {
const splitTitle = this.props.title.split(' ');
const firstWord = splitTitle.shift();
const remainingTitle = splitTitle.join(' ');
return (
<div>
<span className="title">{firstWord}</span>
{remainingTitle}
</div>
);
}
};
export default Child;
Alternativamente, también puede pasar firstWordy remainingTitleal componente Child como un accesorio. Probablemente desee nombrarlos de otra manera.
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras