Блог

Я создаю свой проект в ReactJS. В этом проекте есть страница, на которой я должен создать текстовую область. Эта страница разделена на две части: боковую панель, где вы видите все файлы текущего рабочего пространства, и редактор, область текста html. Когда я нажимаю кнопку, я хотел бы, чтобы текущий файл изменился. Итак, я создал контекст для передачи дочернему элементу. Вот код родительского компонента, мы можем его назвать:

 import '../styles/style.css'; import Editor from './Editor' import Sidebar from './Sidebar' import React, {useState} from 'react';  const WContext = React.createContext();  const EditPage = () =gt; {  const {activeFile, setActiveFile} = useState('Empty');    return lt;gt;  lt;WContext.Provider value={{activeFile, setActiveFile}}gt;  lt;h1 className="edittitle"gt;Edit Pagelt;/h1gt;  lt;div className="edit"gt;  lt;Sidebar /gt;  lt;Editor /gt;  lt;/divgt;  lt;/WContext.Providergt;  lt;/gt; }  export default EditPage; export {WContext};  

Затем есть код боковой панели:

 import {useEffect, useState, useContext} from 'react'; import {WContext} from './EditPage'; import axios from 'axios';  const Sidebar = () =gt; {  const v = useContext(WContext);  const [file, setFile] = useState([]);   useEffect(() =gt; {  //request to server  }, [])   return lt;gt;  lt;div className="sidebar"gt;  lt;h3gt;Files of workspacelt;/h3gt;  lt;div className="sidesaparator"gt;lt;/divgt;  {  file.map(f=gt;{  return lt;button key={f._id} onClick={() =gt; v.setActiveFile(f)} style={{'padding':"10px"}}gt;  {f.name   "."   f.extension}lt;/buttongt;  })  }  lt;/divgt;  lt;/gt; }  export default Sidebar;  

Наконец, код редактора:

 import sun from '../images/sun.png'; import moon from '../images/moon.png'; import {useState, useContext} from 'react'; import {WContext} from './EditPage';  const Editor = () =gt; {  const v = useContext(WContext);  const [text, setText] = useState('//Your code');   const handleChanges = (e) =gt; {  setText(e.target.value);   setLine(countLine);   }   return lt;gt;  lt;form className="editor"gt;  lt;div className="opened"gt; {v.activeFile} lt;/divgt;    lt;textarea name="code" value={text} className="editorText" onChange={handleChanges} spellCheck="false"   id = {bg}gt;lt;/textareagt;    lt;/formgt;  lt;/gt; }  export default Editor;  

В этом последнем файле div с именем класса «открыто» должен содержать текстовое значение activeFile, но это пустая строка. С другой стороны, в файле previus, когда я нажимаю на один файл, он должен стать активным, но в заголовке вопроса появляется ошибка. Я хотел бы знать, где я ошибаюсь и как это исправить. Огромное спасибо

Все это можно исправить, переключившись с скобок на квадратные скобки в объявлении useState