react 不用插件,渲染json数据成markdown

renderMarkDown = str => {

let object = {};

try {

object = JSON.parse(str);

} catch (err) {

console.log(err)

}

return this.renderObject(object)

}

renderObject = (object) => {

switch (typeof (object)) {

case "string":

return <span style={{ color: "#D14" }}>{`"${object}"`}</span>

case "object":

if (Array.prototype.isPrototypeOf(object)) {

return <span >

<span>{'['}</span>

{object.map((item, index) => <span key={index}>

{this.renderObject(item)}

<span>{index < Object.keys(object).length - 1 ? "," : ""}</span>

</span>)}

<span>{']'}</span>

</span>

} else if (Object.prototype.isPrototypeOf(object)) {

return <span>

<span>{'{'}</span>

{Object.keys(object).map((item, index) => <div key={index} style={{ marginLeft: "16px", whiteSpace: "pre" }}>

<span style={{ marginRight: "4px" }}>{`"${item}"`}:</span>

{this.renderObject(object[item])}

<span>{index < Object.keys(object).length - 1 ? "," : ""}</span>

</div>)}

<span>{'}'}</span>

</span>

} else if (object === null) {

return <span style={{ color: "#099" }}>{"null"}</span>

}

default:

return <span style={{ color: "#099" }}>{object}</span>

}

}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值