markdown编辑器预览的时候是undefined为啥呢？

来源：6-5 引入 easyMDE 编辑器

慕瓜7152103

2022-03-13

图片描述

我就是正常引入了这个组件，然后就不行
把value props去掉也不行

import './App.css';
import 'easymde/dist/easymde.min.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import SimpleMdeReact from "react-simplemde-editor";
import FileSearch from "./components/FileSearch";
import {faPlus, faFileImport} from "@fortawesome/free-solid-svg-icons";
import FileList from "./components/FileList";
import defaultFiles from "./utils/defaultFiles";
import BottomBtn from "./components/BottomBtn";
import TabList from "./components/TabList";

function App() {
  return (
    <div className="App container-fluid">
      <div className='row'>
        <div className="col-3 bg-light left-panel">
          <FileSearch
            title='我的云文档'
            onFileSearch={(val) => {
              console.log(val)
            }}
          />
          <FileList
            files={defaultFiles}
            onFileClick={(id) => {console.log(id)}}
            onFileDelete={(id) => {console.log(id)}}
            onSaveEdit={(id, newValue) => {console.log(id, newValue)}}
          />
          <div className='bottom-btn'>
            <div className='btn-block'>
              <BottomBtn
                text='新建'
                colorClass='btn-primary'
                icon={faPlus}
              />
            </div>
            <div className='btn-block'>
              <BottomBtn
                text='导入'
                colorClass='btn-success'
                icon={faFileImport}
              />
            </div>
          </div>
        </div>
        <div className="col-9 right-panel">
          <TabList
            files={defaultFiles}
            onTabClick={(id) => {console.log(id)}}
            activeId='1'
            unSaveIds={['1','2']}
            onCloseTab={(id) => {console.log('closing', id)}}
          />
          <SimpleMdeReact />
        </div>
      </div>
    </div>
  );
}

export default App;

分屏预览的话就什么都不显示，只有markdown原始语法，没有parse后的东西

写回答

3回答

张轩

2022-03-20

问题已解决，请看 https://coding.imooc.com/learn/questiondetail/262240.html

慕瓜7152103

多谢！

2022-03-20

共1条回复

张轩

2022-03-16

同学你好使用你的 repo 安装以后出错，我就没有详细调。我简单写了一个 demo，发现没有问题，你可以尝试使用 controlled 写法试一下。可以直接参看我的 demo 试试，https://codesandbox.io/s/vigilant-galois-euhuiz?file=/src/App.js

import { useState } from 'react'
import SimpleMDE from "react-simplemde-editor"
import "easymde/dist/easymde.min.css"
    export default function App() {
    const [value, setValue] = useState("Initial value");
    const onChange = (value) => {
        setValue(value);
    }
    return (
    <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <SimpleMDE value={value} onChange={onChange} />
        </div>
    );
}

RainyNotFound

慕瓜7152103

同学你好，我也遇到了同样的问题，请问您是否已解决？如何解决的？谢谢~

2022-03-18

共2条回复

张轩

2022-03-14

同学你好

可以把代码库（git）提供给我一下，我在本地帮你看一下

慕瓜7152103

https://github.com/PlayWithSanLei/Graduation-Project/tree/main/cloud-doc

2022-03-15