Динамически добавлять тег span к первому слову строки

Question

Я работаю над проектом реагирования, в котором я передаю названия, содержащиеся в состояниях, дочернему элементу (см. Внизу).Как я могу динамически добавить первое слово (и только первое слово, потому что мои заголовки могут содержать 2 или 3 слова) внутри this.state.title внутри дочернего элемента?

//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;

Answer 1

Вы можете сделать это в дочернем компоненте.

//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;

В качестве альтернативы, вы также можете передать firstWord и remainingTitle дочернему компоненту в качестве реквизита.Возможно, вы захотите назвать их чем-то другим.