## MDX 能干什么?
发布于 3 个月前 作者 icai 1519 次浏览 来自 分享

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

3 回复

测试

来自拉风的 Taro-cnode

测试ABCddd

来自拉风的 Taro-cnode

@icai 测试

来自拉风的 Taro-cnode

回到顶部