text.nnb

{
    "cells": [
        {
            "language": "typescript",
            "source": [
                "import { marked } from \"marked\";\n\nconst menu = [];\n\n// Override function\nconst renderer = {\n  heading(text, level) {\n    const anchor = text.toLowerCase().replace(/ /g, \"-\");\n    menu.push({\n      text,\n      level,\n      anchor,\n    });\n    return `\n            <h${level}>\n              ${text}<a name=\"${anchor}\" class=\"anchor\" href=\"#${anchor}\">#</a>\n            </h${level}>\n            `;\n  },\n};\n\nmarked.use({ renderer });\n\nconsole.log(\n  marked.parse(\n    \"## 利用 Context  \\n> Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。  \\n### context 的作用:  \\nContext 提供了一种在组件之间共享值的方式，而不必显式地通过组件树的逐层传递 props。  \\nContext 会根据引用标识来决定何时进行渲染（本质上是 value 属性值的浅比较）  \\n### context 的使用方法:  \\n1. 利用生成一个 实例，实例包含  \\n2. 用包裹 顶层组件，利用他 props 的 value 字段传入共享状态与方法\"\n  )\n);\n\nmenu;\n"
            ],
            "outputs": [
                {
                    "items": [
                        {
                            "mime": "application/vnd.code.notebook.stdout",
                            "value": [
                                "",
                                "            <h2>",
                                "              利用 Context<a name=\"利用-context\" class=\"anchor\" href=\"#利用-context\">#</a>",
                                "            </h2>",
                                "            <blockquote>",
                                "<p>Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。  </p>",
                                "</blockquote>",
                                "",
                                "            <h3>",
                                "              context 的作用:<a name=\"context-的作用:\" class=\"anchor\" href=\"#context-的作用:\">#</a>",
                                "            </h3>",
                                "            <p>Context 提供了一种在组件之间共享值的方式，而不必显式地通过组件树的逐层传递 props。<br>Context 会根据引用标识来决定何时进行渲染（本质上是 value 属性值的浅比较）  </p>",
                                "",
                                "            <h3>",
                                "              context 的使用方法:<a name=\"context-的使用方法:\" class=\"anchor\" href=\"#context-的使用方法:\">#</a>",
                                "            </h3>",
                                "            <ol>",
                                "<li>利用生成一个 实例，实例包含  </li>",
                                "<li>用包裹 顶层组件，利用他 props 的 value 字段传入共享状态与方法</li>",
                                "</ol>",
                                "",
                                ""
                            ]
                        }
                    ]
                },
                {
                    "items": [
                        {
                            "mime": "text/plain",
                            "value": [
                                "[",
                                "  {",
                                "    text: \u001b[32m'利用 Context'\u001b[39m,",
                                "    level: \u001b[33m2\u001b[39m,",
                                "    anchor: \u001b[32m'利用-context'\u001b[39m",
                                "  },",
                                "  {",
                                "    text: \u001b[32m'context 的作用:'\u001b[39m,",
                                "    level: \u001b[33m3\u001b[39m,",
                                "    anchor: \u001b[32m'context-的作用:'\u001b[39m",
                                "  },",
                                "  {",
                                "    text: \u001b[32m'context 的使用方法:'\u001b[39m,",
                                "    level: \u001b[33m3\u001b[39m,",
                                "    anchor: \u001b[32m'context-的使用方法:'\u001b[39m",
                                "  }",
                                "]"
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}