React.component метод возврата в заблуждение

Итак, я пытаюсь изучить React.js, и я начинаю читать с Tutorials Point. Я создал образец приложения React в соответствии с их инструкциями, и это получилось очень хорошо.React.component метод возврата в заблуждение

Мой вопрос в том, что я видел это объявление React.component()here в файле App.jsx. Они вернули фактический HTML-код внутри метода возврата. Я никогда не видел такого заявления о возвращении раньше.

class App extends React.Component { 
    render() { 
     return (
     <div> 
      Hello World!!! 
     </div> 
    ); 
    } 
}

Он даже не возвращает его как строку или объект (исправьте меня, если я ошибаюсь здесь).

Если кто-то может это объяснить, я был бы очень признателен.

источник

2016-09-12 Bharath

Это фактически 'JSX' - структура, подобная XML/древовидной структуре, которую React использует для получения« виртуальной »DOM», которая помогает в производительности, поэтому механизму рендеринга не нужно повторно отображать весь пользовательский интерфейс с каждым изменением Я не буду повторять [Документы] (https://facebook.github.io/react/docs/jsx-in-depth.html#the-transform). в комментарии, однако. –

Здесь вы можете увидеть, как превращается материал html. Подсказка: JavaScript https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&experimental=true&loose = false & spec = false & code = let% 20x% 20% 3D% 20% 3Cdiv% 20% 2F% 3E – azium

Это определенно помогает. Спасибо @MarkC – Bharath

Синтаксис HTML выглядит не на самом деле HTML, и не все свойства HTML будут работать в нем. Это JSX, JSX - это шаг препроцессора, который добавляет синтаксис XML к JavaScript. Например, если вы пытаетесь использовать класс как свойство в .JSX файл его не будет на самом деле применить класс CSS:

class App extends React.Component { 
 
    render() { 
 
     return (
 
     <div class="cssClass"> 
 
      Hello World!!! 
 
     </div> 
 
    ); 
 
    } 
 
}

Вы должны сделать это. Обратите внимание класс теперь имя класса

class App extends React.Component { 
 
    render() { 
 
     return (
 
     <div className="cssClass"> 
 
      Hello World!!! 
 
     </div> 
 
    ); 
 
    } 
 
}

Вы не должны использовать синтаксис JSX писать Реагировать приложения, но это делает его немного более удобным для чтения. Вы можете больше узнать об этом here. ReactJS возьмет этот синтаксис и превратит его в элементы HTML. Кроме того, вот некоторые gotchas, которые делают его отличным от HTML.

источник

2016-09-12 22:35:47 diaz994

React.component метод возврата в заблуждение

ответ

Смежные вопросы