javascript - 如何在反应中返回html文本变量并打印为html？

问题描述

函数 1 返回 JSON 数组。

function allPlans()
{
    var all_plans = {
            'Stock Card Views' : {
                'free':{status:true,plantext:"5 Per Month"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"5 Per Month"}                            
            },
            'Portfolio Creation' : {
                'free':{status:true,plantext:"Unlimited"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"Unlimited"}                            
            },
            'Transactions In A Portfolio' : {
                'free':{status:true,plantext:"Unlimited"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"Unlimited"}                            
            },
            'Advance Filter':{
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"Full Access"},
                'vip':{status:true,plantext:"Full Access"}                            
            },
            'Stock Card Requests' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"3 Per Month"},
                'vip':{status:true,plantext:"3 Per Month"}                            
            },
            'Premium Posrfolio Access' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"-"},
                'vip':{status:true,plantext:"1 Portfolio"}                            
            },
            'Investment Pick' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"-"},
                'vip':{status:true,plantext:"1 Per Month"}                            
            },
        }

    return all_plans;
}

功能2：在以下功能中使用以上功能

function renderPlansArray()
{

    var all_plans = allPlans();
    var rowclass = true;

    var htmltext = "";
    for(var PlanName in all_plans) 
    {

        console.log(plan_item_gray);
        if (props.planname == 'free')
        {

            if(rowclass == true)
            {
                rowclass = false;
                htmltext += <div className={plan_item_gray}>all_plans[PlanName]['free']['plantext']</div>;
            }
            else
            {
                rowclass = true;
                htmltext += <div className={plan_item}>all_plans[PlanName]['free']['plantext']</div>;
            }


        }

    }

    return(htmltext);

}

在上面的函数中，我在htmltext变量中生成了一个 HTML 文本并返回。但是当我像上面一样返回时，这将返回 [object Object]，当我转换为字符串时，它将按原样打印 HTML 文本。

我想将此变量作为 HTML 返回。

我在另一个函数中调用了上面的函数来呈现如下所示的 HTML。

return (<div className={plan_column}>
   {renderPlansArray()}
</div>)

它正在返回：

和

我需要像这样的 HTML：

标签： javascripthtmlreactjsreduxreact-redux

由于您想直接设置 HTML，因此您需要使用以下内容dangerouslySetInnerHTML：

someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>'


return(<div className="Container" dangerouslySetInnerHTML={{__html: 
            someHtml}}></div>)

但是，这不是您应该使用jsx和反应的方式。更好的方法是使用React.components和渲染它们。

javascript - 如何在反应中返回html文本变量并打印为html？

问题描述

解决方案

推荐阅读