Question

我正在做一个React项目，其中我将状态中包含的标题传递给child元素（请参阅底部）。我如何在子元素的this.state.title中动态添加第一个单词（并且只有第一个单词导致我的标题可以包含2个或3个单词）？

//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传递给Child组件作为道具。您可能想给它们起个不同的名字。

动态将span标签添加到字符串的第一个单词

1 个答案: