## MDX 能干什么?
MDX 能干什么?
它能够让我们在 markdown 中写 JSX
这是 2018 年,降水量柱状图。
<Chart data={[6, 5, 2, 4.5, 1.5, 2.5, 2, 2.5, 1.5, 2.5, 3.5, 7]} color="#3b82f6"/>
首先这不是一张图片,而是用代码渲染的。
我看到很多公司的微信推文,很多地方都是用图片排版的,有很多设计师把大量的时间花了在文案和设计稿的校对上,我正借助了 MDX 的优势,开发了 MDX Editor,来互补微信排版的不足,只需要将文章写成 markdown 格式,便可以一键拷贝到微信公众号后台。
实现
Chart 这个组件定义在 config 中
function Chart({ data = [], color }) {
return (
<div className="snowfall">
{data.map((d, i) => (
<div
key={i}
className="snowfall-bar"
style={{
height: d * 20,
backgroundColor: color,
}}
/>
))}
</div>
)
}
再加点 css
.snowfall {
display: flex;
align-items: flex-end;
justify-content: center;
}
.snowfall-bar {
flex-basis: 0;
flex-grow: 1;
margin: 4px;
display: flex;
justify-content: center;
align-items: end;
font-size: 10px;
color: #eff6ff;
}
感谢你的阅读和使用,若遇到问题,可以在 github 提 issues,也可以关注微信公众号 “JS 酷”留言反馈,希望更够帮助到您。
来自拉风的 Taro-cnode