天天看點

React Native 截取後端資料傳回Html标簽中的值

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Dimensions,
    Text
} from 'react-native';
import { Widget } from 'rn-yunxi';
const { width, height } = Dimensions.get('window');
//子產品聲名并導出
export default class EmText extends Component {

    //預設屬性
    static defaultProps = {
        str: '<em>紅酒</em>',
    };
    //構造函數
    constructor(props) {
        super(props);
        let normalText = [];
        let specialText = [];


        if (props.str && props.str !== '' && props.str.length > ) {
            try {
                let tempText = props.str;
                tempText = tempText.replace(/<[^>]*>/g, 'tmd')
                tempText.trim().split('tmd').forEach((obj, index) => {
                    if ((index + ) %  === ) {
                        normalText.push(obj)
                    } else {
                        specialText.push(obj)
                    }
                })
            } catch (e) { }
        }
        this.state = { //狀态機變量聲明
            normalText,
            specialText,
        }
    }



    //渲染
    render() {
        const { normalText,
            specialText, } = this.state
        if (normalText && normalText.length > ) {
            return (
                <Text >
                    {normalText.map((obj, i) => {
                        return (<Text>{obj}
                            <Text style={{ color: 'red' }}>{specialText[i]}</Text>
                        </Text>)
                    })}
                </Text>
            );
        }
        return (
            <Text >{this.props.str}</Text>
        );

    }
};
           

使用方法:

<EmText str={'<a>擷取後端資料傳回Html标簽中的值</a>'} />
           

取到的值就是: 擷取後端資料傳回Html标簽中的值

繼續閱讀