问题

我是ReactJS的新手。我在使用`react-markdown`时遇到一些问题。我想使用markdown嵌入视频。

这是我问题的简单示例。

// 导入 react-markdown
import ReactMarkdown from 'react-markdown';

// markdown 字符串
const md =
你好，嵌入来自YouTube的视频。
{/* 我如何在这里嵌入视频 */}


// 使用 markdown
<ReactMarkdown
linkTarget="_blank"

{md}

<details>
<summary>英文:</summary>

I am new with ReactJS. I have some problems with `react-markdown`. I want to embed a video using markdown.

Here is my simple example of my problem.

// import react-markdown
import ReactMarkdown from 'react-markdown'

// markdown string
const md =
Hello video embeded fro youtube.
{/* how can I embed a video here */}


// use markdown
<ReactMarkdown
linkTarget="_blank"
> {md} </ReactMarkdown>

</details>


# 答案1
**得分**: 1

You could do this by writing a **iframe** inside the markdown.

For this to work you'll need to install [rehype-raw](https://github.com/rehypejs/rehype-raw) which is a plugin you can use with `ReactMarkdown`.

```sh
yarn add rehype-raw
# or
npm install rehype-raw --save

Then you can use it like this

import rehypeRaw from "rehype-raw";

const md = `Hello this video is embeded from Youtube!

<iframe width="560" height="315" src="https://www.youtube.com/embed/JvwW5Tsf97c" />`;

return (
  <ReactMarkdown rehypePlugins={[rehypeRaw]} linkTarget="_blank">
    {md}
  </ReactMarkdown>
);

Note that you'll need a embed Youtube link and not a ?watch= link.

yarn add rehype-raw
# or
npm install rehype-raw --save

import rehypeRaw from "rehype-raw";

const md = `Hello this video is embeded from Youtube!

<iframe width="560" height="315" src="https://www.youtube.com/embed/JvwW5Tsf97c" />`;

return (
  <ReactMarkdown rehypePlugins={[rehypeRaw]} linkTarget="_blank">
    {md}
  </ReactMarkdown>
);

答案2

得分: 0

<!-- 开始代码段：JavaScript 隐藏：false 控制台：true Babel：true -->

<!-- 语言：lang-js -->
const App = () => {
  const data = `lorem &lt;b onmouseover=&quot;alert(&#39;mouseover&#39;);&quot;&gt;ipsum&lt;/b&gt;`;

  return (
    <div
      dangerouslySetInnerHTML={{__html: data}}
    />
  );
}

export default App;

const App = () => {
  const data = `lorem ipsum &lt;img src=&quot;&quot; onerror=&quot;alert(&#39;message&#39;);&quot; />`;

  return (
    <div
      dangerouslySetInnerHTML={{__html: data}}
    />
  );
}

export default App;

<!-- 语言：lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<!-- 结束代码段 -->

    const App = () => {
  const data = `lorem <b onmouseover="alert('mouseover');">ipsum</b>`;

  return (
    <div
      dangerouslySetInnerHTML={{__html: data}}
    />
  );
}

export default App;


const App = () => {
  const data = `lorem ipsum <img src="" onerror="alert('message');" />`;

  return (
    <div
      dangerouslySetInnerHTML={{__html: data}}
    />
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>