передать объект, содержащий html как атрибут, в элемент jsx

Question

У меня есть основной компонент, называемый VariantList, в котором перечислены некоторые блоки, расположенные друг над другом на основе json, который я создал сам, при каждом нажатии кнопки копирования на каждом блоке будет создан другой блок, точно такой же под первым.как первый.Моя проблема в том, что когда я сохраняю данные в качестве атрибута в элементе box, внутренний объект, содержащий jsx, не будет доступен для чтения, когда будет создан ящик, выдаст ошибку.

import React, { Component } from 'react';



class VariantList extends Component {

    constructor() {
        super();
        this.handleCopy = this.handleCopy.bind(this);
        this.state = {
            variants: [

                {
                    id: 1,
                    title: 'تنوع ۱',
                    status: {
                        number: 1,
                        title: 'تایید شده'
                    },
                    description: 'تنوع های مختص این محصول',
                    variants:  [

                        {
                            icon: 'fa-paint-brush',
                            title: 'رنگ انتخاب شده:',
                            value: <div>
                                        <span style={{ width:"12px",height:"12px",margin:"0 4px",backgroundColor:"#ff0000",borderRadius:"50%",display: "inline-block",verticalAlign: "middle" }}></span>
                                        <span>قرمز</span>
                                    </div>
                        },
                        {
                            icon: 'fa-pencil',
                            title: 'سایز:',
                            value: <span>XL</span>
                        },
                        {
                            icon: 'fa-plane',
                            title: 'گارانتی:',
                            value: <span>امرتات</span>
                        },
                        {
                            icon: 'fa-tag',
                            title: 'قیمت:',
                            value: <span>۱۲۰۰۰۰۰۰ تومان</span>
                        },
                        {
                            icon: 'fa-tint',
                            title: 'حافظه:',
                            value: <span>512 GB</span>
                        },
                        {
                            icon: 'fa-wifi',
                            title: 'تخفیف:',
                            value: <span>۲۵٪</span>
                        },
                        {
                            icon: 'fa-send',
                            title: 'هدیه:',
                            value: <span>دارد</span>
                        },
                        {
                            icon: 'fa-signal',
                            title: 'موجودی:',
                            value: <span>۱۰۰ عدد</span>
                        },
                        {
                            icon: 'fa-vcard',
                            title: 'زمان بندی:',
                            value: <span>۸ صبح پنج شنبه ۲۳ آبان</span>
                        }

                    ]
                }

            ]
        }
    }
    handleCopy(variant) {
        let variantArr = this.state.variants;
        variantArr.splice(this.state.variants.findIndex(x => x.id === variant.id),0,variant);
        this.setState({
            variants: variantArr
        });
    }

    render() {
        let variant_boxes = [];
        for (let i = 0; i < this.state.variants.length; i++) {
            variant_boxes.push(<VariantBox key={ i } data = { this.state.variants[i] } copyVariant={ this.handleCopy } index={ i+1 } />);
        }

        return (
            <div id="variantBoxContainer" className="row no-gutters">
                { variant_boxes }
            </div>
        );
    }
}

class VariantBox extends Component {

    constructor(props) {
        super(props);
        this.handleCopy = this.handleCopy.bind(this);
        this.variantRef = React.createRef();
    }

    handleCopy = () => {
        this.props.copyVariant(JSON.parse(this.variantRef.current.getAttribute('variant')));
    }
    render() {
        return(
            <div className="col-xxl-12 justify-content-center yelno-bg-white variant_box"
                variant={ JSON.stringify(this.props.data) }
                ref={this.variantRef} >
                <div className="row no-gutters">
                    <div className="col-xxl variant_badges">
                        <div className="yelno-badge variant">
                            <span className="innerBadge">{ this.props.data.title }</span>
                        </div>
                        {
                            this.props.data.status.number ?
                            "" :
                            <div className="yelno-badge inprocess">
                                <span className="innerBadge">{ this.props.data.status.title }</span>
                            </div>
                        }
                    </div>
                    <div className="col-xxl text-left action_btn_container">
                        <div className="action_btn d-inline-block">
                            <i className="fa fa-copy fa-lg" variantid={ this.props.data.id } onClick={ this.handleCopy }></i>
                        </div>
                        <div className="action_btn d-inline-block">
                            <i className="fa fa-edit fa-lg"></i>
                        </div>
                        <div className="action_btn d-inline-block">
                            <i className="fa fa-eye fa-lg"></i>
                        </div>
                        <div className="action_btn d-inline-block">
                            <i className="fa fa-trash fa-lg"></i>
                        </div>
                    </div>
                </div>
                <div className="row no-gutters variant-attributes">
                    <VariantItem data = { this.props.data.variants } />
                </div>
            </div>
        );
    }
}


class VariantItem extends Component {
    render() {
        return(
            this.props.data.map((data,index) => {
                return (
                    <div key={ index } className="col-xxl text-center">
                        <i className={ "fa " + data.icon + " fa-2x yelno-color-light-grey variant-attribute-icon" }></i>
                        <span className="variant-attribute-title d-block yelno-color-light-grey">
                            { data.title }
                        </span>
                        <div className="variant-attribute-value yelno-12BoldS">
                            {/* { data.value } */}
                        </div>
                    </div>
                );
            })
        );
    }
}

export default VariantList;

Я прокомментировал {/* { data.value } */} но если я раскомментирую его после нажатия кнопки «Копировать», выдается ошибка из-за неопределенного this.state.variants[i].variants[j].value, содержащего html.Ваша помощь заранее оценена.

Answer 1

Я нашел ответ по идее, которую мне дали в комментариях, поэтому я не сохранил узел HTML как JSX в JSON, а сохранил его как строку и использовал библиотеку реагировать-html-анализатор для преобразования строки в компонент реагированиякак показано ниже:

import ReactHtmlParser from 'react-html-parser';

отредактировал эту строку в JSON в компоненте VariantList

value: '<div><span style="width:12px;height:12px;margin:0 4px;background-color:#ff0000;border-radius:50%;display: inline-block;vertical-align: middle; "></span><span>قرمز</span></div>'

и, наконец, в компоненте VariantItem преобразовал { data.value } в {ReactHtmlParser(data.value) }, и все заработало отлично.