рдореИрдВ рдЗрд╕ рддрд░рд╣ annotations
рд╕рд╛рде react-ace
рдШрдЯрдХ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВ:
<ReactAce
mode={'javascript'}
// ...
annotations={[{row: 0, column: 0, type: 'error', text: 'Some error.'}]}
/>
рдореИрдиреНрдпреБрдЕрд▓ рдПрдиреЛрдЯреЗрд╢рди рд╕рдВрдХреНрд╖рд┐рдкреНрдд рд░реВрдк рд╕реЗ рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛, рдлрд┐рд░ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреЗ рдЪрд▓рдиреЗ рдХреЗ рдмрд╛рдж рдЙрд╕реЗ рд╣рдЯрд╛ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред
рдпрд╣ gif рдПрдХ рдкреЗрдЬ рд░рд┐рдлреНрд░реЗрд╢ рджрд┐рдЦрд╛рддрд╛ рд╣реИред рдкреНрд░рддреНрдпреЗрдХ рдкреГрд╖реНрда рд▓реЛрдб рдкрд░ рдПрдиреЛрдЯреЗрд╢рди рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдлрд┐рд░ рд╣рдЯрд╛ рджрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред
рдореИрдВрдиреЗ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреЛ setOptions={{useWorker: false}}
рд╕рд╛рде рдЕрдХреНрд╖рдо рдХрд░ рджрд┐рдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдХрд┐рдП рдЧрдП рдПрдиреЛрдЯреЗрд╢рди рдХреЛ рднреА рдЕрдХреНрд╖рдо рдХрд░ рджреЗрддрд╛ рд╣реИред
рдзрдиреНрдпрд╡рд╛рдж!
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдПрдиреЛрдЯреЗрд╢рди рдХреЗ 2 рд╕реЗрдЯ рд╣реЛрдиреЗ рдЪрд╛рд╣рд┐рдПред рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдЬреЛрдбрд╝реЗ рдЧрдП рдПрдиреЛрдЯреЗрд╢рди рдФрд░ рдореЛрдб рдХреЗ рдкрд╛рд░реНрд╕рд░ рджреНрд╡рд╛рд░рд╛ рдЬреЗрдирд░реЗрдЯ рдХрд┐рдП рдЧрдП рдПрдиреЛрдЯреЗрд╢рдиред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╡реЗ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдЯрдХрд░рд╛рддреЗ рд╣реИрдВ рдФрд░ рдПрдХ рджреВрд╕рд░реЗ рдХреЛ рдорд┐рдЯрд╛ рджреЗрддреЗ рд╣реИрдВ ...
рд╣рд╛рдБ, рдпрд╣реА рд╣реЛ рд░рд╣рд╛ рд╣реИред рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреЗ рдЬреАрд╡рдирдЪрдХреНрд░ рдХреЗ рдмрд╛рд╣рд░ рдПрдиреЛрдЯреЗрд╢рди рдореМрдЬреВрдж рд╣реЛрдирд╛ рд╕рдВрднрд╡ рд╣реИ рдпрд╛ рдирд╣реАрдВред
рдореИрдВ рдЙрд╕реА рдЪреБрдиреМрддреА рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред
рдореИрдВ рд╕рдВрдкрд╛рджрдХ рдХреЛ рдХрд╕реНрдЯрдо рдПрдиреЛрдЯреЗрд╢рди рдЬреЛрдбрд╝рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ, рдЬрдмрдХрд┐ рдЕрднреА рднреА рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рджреНрд╡рд╛рд░рд╛ рдПрдиреЛрдЯреЗрд╢рди рдХреЛ рд╕рдВрд░рдХреНрд╖рд┐рдд рдХрд░рдирд╛ рд╣реИред
рдЕрдкрдиреЗ рдХрд╕реНрдЯрдо рдПрдиреЛрдЯреЗрд╢рди рд╕реЗрдЯ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреА рдПрдиреЛрдЯреЗрд╢рди рдореЗрд░рд╛ рдУрд╡рд░рд░рд╛рдЗрдб рдХрд░ рджреЗрддреА рд╣реИред
рдореИрдВрдиреЗ рдРрд╕реЗ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреЛ рдЕрдХреНрд╖рдо рдХрд░рдиреЗ рдХреЗ рд╕реБрдЭрд╛рд╡ рджреЗрдЦреЗ рд╣реИрдВред
setOptions={{useWorker: false}}
рдРрд╕рд╛ рдХрд░рдиреЗ рд╕реЗ рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХрд╛ рдПрдиреЛрдЯреЗрд╢рди рдЕрдХреНрд╖рдо рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореЗрд░реА рд╕рднреА рд▓рд╛рдЗрдирд┐рдВрдЧ/рд╡рд╛рдХреНрдпрд╡рд┐рдиреНрдпрд╛рд╕ рд╣рд╛рдЗрд▓рд╛рдЗрдЯрд┐рдВрдЧ рд╕рдорд╛рдкреНрдд рд╣реЛ рдЧрдИ рд╣реИред (рдмрд┐рд▓реНрдХреБрд▓ рдирд╣реАрдВ рдЬреЛ рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдБ)
рдореИрдВ рдЕрдкрдиреЗ рдХрд╕реНрдЯрдо рдПрдиреЛрдЯреЗрд╢рди рдХреЗ рд╕рд╛рде рдХрд╛рд░реНрдпрдХрд░реНрддрд╛ рдХреА рдПрдиреЛрдЯреЗрд╢рди рдХреЛ рдорд░реНрдЬ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред
рдХреНрдпрд╛ рдХреЛрдИ рд╕реБрдЭрд╛рд╡ рджреЗ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕ рдмрд╛рд░реЗ рдореЗрдВ рдХреИрд╕реЗ рдЬрд╛рдирд╛ рд╣реИ?
рдирдорд╕реНрддреЗ, рдореИрдВ рдРрд╕реА рд╣реА рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реВрдВ, рдХрд╕реНрдЯрдо рддреНрд░реБрдЯрд┐ рд╕рдВрджреЗрд╢ рдЬреЛрдбрд╝рдиреЗ рдореЗрдВ рдЕрд╕рдорд░реНрде рд╣реВрдВред рдХреЛрдИ рднреА рд╕рдорд╛рдзрд╛рди?
annotations
рдкреНрд░реЛрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рдмрдЬрд╛рдп, рдореИрдВ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ setAnnotations
ред
const Editor = ({ annotations: customAnnotations = [], value }) => {
const [annotations, setAnnotations] = useState([]);
const [editor, setEditor] = useState();
const nextAnnotations = [
...annotations.filter(({ custom }) => !custom), // annotations by worker
...customAnnotations.map((annotation) => ({ ...annotation, custom: true })) // flag for exclusion
];
useEffect(() => {
if (editor) {
editor.getSession().setAnnotations(nextAnnotations);
}
}, [editor, JSON.stringify(nextAnnotations)]);
return (
<ReactAce
mode="html"
onLoad={setEditor}
onValidate={setAnnotations}
setOptions={{ useWorker: true }}
value={value}
/>
}
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
annotations
рдкреНрд░реЛрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рдмрдЬрд╛рдп, рдореИрдВ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗsetAnnotations
ред