Skip to main content

2 posts tagged with "React Live"

React Live tag description

View All Tags

如何比较版本号大小

· One min read
陈碧滔
陈碧滔
Front End Engineer
tip

比较两个版本号大小的 JavaScript 函数，支持如“1.1.1”、“1.12.10”、“0.0.1”、“0.0.0”、“2.0.0”这样的版本号格式

function App() {
  /**
   * 比较两个版本号的大小
   * @param {string} v1 - 版本号1，例如 '1.1.1'
   * @param {string} v2 - 版本号2，例如 '1.12.10'
   * @returns {number} - 如果v1 > v2返回1，v1 < v2返回-1，相等返回0
   */
  function compareVersion(v1, v2) {
      const arr1 = v1.split('.').map(Number);
      const arr2 = v2.split('.').map(Number);
      const len = Math.max(arr1.length, arr2.length);

      for (let i = 0; i < len; i++) {
          const num1 = arr1[i] || 0;
          const num2 = arr2[i] || 0;
          if (num1 > num2) return 1;
          if (num1 < num2) return -1;
      }
      return 0;
  }
  return (<div>
    <p>{compareVersion("1.1.1", "1.12.10")}</p>
    <p>{compareVersion("1.12.10", "1.1.1")}</p>
    <p>{compareVersion("1.1.1", "1.1.1")}</p>
  </div>)
}
输出结果：
function App() {
  /**
   * 比较两个版本号的大小
   * @param {string} v1 - 版本号1，例如 '1.1.1'
   * @param {string} v2 - 版本号2，例如 '1.12.10'
   * @returns {number} - 如果v1 > v2返回1，v1 < v2返回-1，相等返回0
   */
  function compareVersion(v1, v2) {
      const arr1 = v1.split('.').map(Number);
      const arr2 = v2.split('.').map(Number);
      const len = Math.max(arr1.length, arr2.length);

      for (let i = 0; i < len; i++) {
          const num1 = arr1[i] || 0;
          const num2 = arr2[i] || 0;
          if (num1 > num2) return 1;
          if (num1 < num2) return -1;
      }
      return 0;
  }
  const versions = ["1.1.1.1", "1.1.1", "1.9.10", "0.0.1", "0.0.0", "2.0.0"];
  versions.sort(compareVersion);
  return (<div>
    <p>排序：{versions.join(", ")}</p>
  </div>)
}
输出结果：

在 Docusaurus MDX 中使用 ReactLive 的案例

· 3 min read
陈碧滔
陈碧滔
Front End Engineer

你可以在 Docusaurus 的 MDX 文件中这样使用 ReactLive 组件，实现代码片段和运行结果的互动演示。

官方文档 https://nearform.com/open-source/react-live/docs/

先实现代码​

import React from 'react';
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';

type ReactLiveDemoProps = {
  code: string;
  liveProps?: React.ComponentProps<typeof LiveProvider>;
};

export default function ReactLiveDemo({ code, liveProps = {} }: ReactLiveDemoProps) {
  return (
    <LiveProvider code={code} {...liveProps}>
      <LiveEditor />
      <LiveError />
      <div>
        <strong>输出结果：</strong>
        <LivePreview />
      </div>
    </LiveProvider>
  );
}

下面分别演示了几个不同场景：

场景一：基础累加​

import ReactLiveDemo from "./ReactLiveDemo";

export default function Demo() {
  let code = `function App() {
  function add(...args: number[]) {
    return args.reduce((a, b) => a + b, 0);
  }
  return (<div>{add(1, 2, 3)}</div>)
}`

  return (
    <ReactLiveDemo
      code={code}
      liveProps={{
        language: "ts",
        noInline: false,
        typescript: true,
      }}
    />
  );
}

预览

function App() {
  function add(...args: number[]) {
    return args.reduce((a, b) => a + b, 0);
  }
  return (<div>{add(1, 2, 3)}</div>)
}
输出结果：

场景二：链式调用​

import { ReactLiveDemo } from "./ReactLive";

export default function Demo() {
  let code = `
    function App() {
      function add(...args: number[]) {
        let sum = Array.isArray(args) ? args.reduce((a, b) => a + b, 0) : 0;
        function inner(...next: number[]) {
          sum += Array.isArray(next) ? next.reduce((a, b) => a + b, 0) : 0;
          return inner;
        }
        inner.valueOf = () => sum;
        inner.toString = () => sum.toString();
        return inner;
      }
      return (<div>{+add(1)(2)(3)}</div>);
    }
  `

  return (
    <ReactLiveDemo
      code={code}
      liveProps={{
        language: "ts",
        noInline: false,
        typescript: true,
      }}
    />
  );
}

预览


    function App() {
      function add(...args: number[]) {
        let sum = Array.isArray(args) ? args.reduce((a, b) => a + b, 0) : 0;
        function inner(...next: number[]) {
          sum += Array.isArray(next) ? next.reduce((a, b) => a + b, 0) : 0;
          return inner;
        }
        inner.valueOf = () => sum;
        inner.toString = () => sum.toString();
        return inner;
      }
      return (<div>{+add(1)(2)(3)}</div>);
    }
输出结果：

场景三：多参数混合调用​

import { ReactLiveDemo } from "./ReactLive";

export default function Demo() {
  let code = `
    function App() {
      function add(...args: number[]) {
        let sum = Array.isArray(args) ? args.reduce((a, b) => a + b, 0) : 0;
        function inner(...next: number[]) {
          sum += Array.isArray(next) ? next.reduce((a, b) => a + b, 0) : 0;
          return inner;
        }
        inner.valueOf = () => sum;
        inner.toString = () => sum.toString();
        return inner;
      }
      return <div>{+add(1, 2)(3)}</div>;
    }
  `

  return (
    <ReactLiveDemo
      code={code}
      liveProps={{
        language: "ts",
        noInline: false,
        typescript: true,
      }}
    />
  );
}

预览


    function App() {
      function add(...args: number[]) {
        let sum = Array.isArray(args) ? args.reduce((a, b) => a + b, 0) : 0;
        function inner(...next: number[]) {
          sum += Array.isArray(next) ? next.reduce((a, b) => a + b, 0) : 0;
          return inner;
        }
        inner.valueOf = () => sum;
        inner.toString = () => sum.toString();
        return inner;
      }
      return <div>{+add(1, 2)(3)}</div>;
    }
输出结果：

场景四：编辑器主题和配置自定义​

你可以通过 liveProps 传递更多参数，定制编辑器行为，例如设置只读、不同的主题、是否内联运行等：

<ReactLiveDemo
  code={`const hello: string = "Hello, Docusaurus!";
<div>{hello}</div>`}
  liveProps={{
    language: "ts",
    theme: { plain: { backgroundColor: "#222", color: "#fff" } },
    disabled: true
  }}
/>

场景五：只展示代码（不运行）​

如果只想展示代码，不显示运行结果，可以通过在外层自定义隐藏 LivePreview：

<ReactLiveDemo
  code={`function foo() { return "bar"; }`}
  liveProps={{
    language: "ts",
    noInline: false,
    theme: { plain: { backgroundColor: "#fafafa" } }
  }}
/>