增强您的React UI并使用来自Markdown文件的帮助工具提示
增强您的React UI并使用来自Markdown文件的帮助工具提示
(opens new window)
(opens new window)
本文的目标是描述如何在React应用程序中使用Markdown文件来呈现上下文帮助。
为此，我们将使用yarn add或npm install安装以下库：
yarn add react-tooltipyarn add react-markdown
功能组件
我们创建一个返回_Tooltip_的功能组件，其内容将使用_ReactMarkdown_组件加载：
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import ReactMarkdown from 'react-markdown';
import Tooltip from 'react-tooltip';
const HelpTooltip = ({ markdownContent }) => (
<Tooltip
html
place="right"
type="dark"
effect="solid"
multiline
delayShow={500}
className="help-tooltip"
getContent={() => <ReactMarkdown source={markdownContent} />}
>
<span className="help-icon">?</span>
</Tooltip>
);
export default HelpTooltip;
``` rom 'react' import { useEffect, useState } from 'react';import PropTypes from 'prop-types';import { Tooltip } from 'react-tooltip';import ReactMarkdown from 'react-markdown';export const HelpComponent = ({ id, markdownFilename, place }) => { const [content, setContent] = useState(''); useEffect(() => { fetch(markdownFilename) .then((res) => res.text()) .then((text) => { setContent(text); }); }); return ( <Tooltip id={id} effect='solid' place={place} border> <ReactMarkdown>{content}</ReactMarkdown> </Tooltip> );};HelpComponent.propTypes = { id: PropTypes.string.isRequired, markdownFilename: PropTypes.string.isRequired, place: PropTypes.string,};HelpComponent.defaultProps = { place: 'bottom',};
ReactMarkdown组件允许使用Markdown格式的文本，但不支持外部文件。
在useEffect钩子中，我们使用markdownFilename参数指定的文件路径加载文件的内容，使用fetch函数进行异步请求，然后将其转换为文本格式，并将结果设置为content的状态。
最后，我们在返回的组件中使用Tooltip组件来显示content的内容。Tooltip组件接受id、effect、place和border属性作为参数，并将content包裹在ReactMarkdown组件中显示。 将以下Markdown翻译成中文并删除一级标题: etch** 函数。一旦获取内容，我们将设置在状态中以在 ReactMarkdown 组件中加载为 child。
默认情况下，工具提示将显示在引用 HelpComponent 的元素下方，使用 data-tooltip-id 属性。
示例 #
在下面的示例中，我们在 public/markdown 文件夹中创建一个名为 help_phase_trend.md 的文件。
### 趋势阶段-**看涨** 。毫无疑问，中长期趋势是看涨的。A...