Question

我有一个名为VariantList的主要组件，它基于我自己创建的json列出了一些堆叠在一起的框，每个框上都有一个复制按钮，当单击时，将在第一个框的下方创建另一个完全相同的框作为第一个。我的问题是，当我将数据另存为box元素中的一个属性时，创建该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 } */}，但是如果单击复制按钮后取消注释，则由于包含HTML的未定义this.state.variants[i].variants[j].value而引发错误。您的帮助已提前得到了补偿。

Answer 1

我通过注释中给出的想法找到了答案，因此我没有将HTML节点另存为JSON中的JSX，而是将其另存为字符串，并使用react-html-parser库将字符串转换为react组件如下所示：

import ReactHtmlParser from 'react-html-parser';

在VariantList组件的JSON中编辑了此行

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) }，它运行良好。

将包含html的对象作为属性传递给jsx元素

1 个答案: