Лучшее руководство по Реагировать JSX в 2024 году. В этом руководстве вы можете изучить Использование JSX,выражение JavaScript,стиль,примечание,массив,HTML-теги против Реагировать сборки,
Реагировать JSX
Реагировать заменить традиционное использование JSX JavaScript.
JSX выглядит как XML является расширением синтаксиса JavaScript.
Мы не обязательно использовать JSX, но он имеет следующие преимущества:
- JSX выполняется быстрее, потому что он компилируется в код JavaScript после оптимизации.
- Это типобезопасным, он может быть найден во время ошибок компиляции.
- Используйте шаблон авторинга JSX проще и быстрее.
Использование JSX
JSX похож на HTML, мы можем посмотреть на примеры:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Мы можем быть вложены в выше нескольких HTML - теги кода, вам нужно использовать Div элемент , окружающий его, экземпляры р элемент добавляет пользовательский атрибутданных-myattribute, добавить пользовательские атрибуты должны использовать префикс данные-.
ReactDOM.render( <div> <h1>本教程</h1> <h2>欢迎学习 React</h2> <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p> </div> , document.getElementById('example') );
Независимый файл
Ваш код Реагировать JSX может быть размещен на отдельном документе, например, мы создаем helloworld_react.js
файл, следующим образом :
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Затем вводится в файл JS в HTML-файле:
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
выражение JavaScript
Мы можем использовать выражения JavaScript в JSX. Написать выражение в фигурные скобки{}.Примерами могут служить следующие:
ReactDOM.render( <div> <h1>{1+1}</h1> </div> , document.getElementById('example') );
Вы не можете использовать ,если в другом местевысказывания JSX, одно может использоватьусловноевыражение(тернарный оператор)вместо этого. В следующем примере, если переменнаяя равен 1браузера выход будетправда,если вы измените значение I, он будет выдаватьложные.
ReactDOM.render( <div> <h1>{i == 1 ? 'True!' : 'False'}</h1> </div> , document.getElementById('example') );
стиль
Реагировать рекомендуется использовать встроенные стили. Мы можем использовать синтаксисCamelCase для установки встроенных стилей. React добавляет точекавтоматически после определенного количества элементов. Следующий пример иллюстрирует добавлениеMyStyle встроенный стиль для элементов h1:
var myStyle = { fontSize: 100, color: '#FF0000' }; ReactDOM.render( <h1 style = {myStyle}>本教程</h1>, document.getElementById('example') );
примечание
Примечание нужно писать в фигурных скобках, примеры являются следующие:
ReactDOM.render( <div> <h1>本教程</h1> {/*注释ru.*/} </div>, document.getElementById('example') );
массив
JSX позволяет вставлять в массиве шаблонов, массив будет автоматически расширяться для всех участников:
var arr = [ <h1>本教程</h1>, <h2>学的不仅是技术,更是梦想!</h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') );
HTML-теги против Реагировать сборки
Реагировать может сделать HTML-теги (строки) или Реагировать компоненты (классы).
Для визуализации HTML-теги, просто использовать имя тега строчными буквами в JSX.
var myDivElement = <div className="foo" />; ReactDOM.render(myDivElement, document.getElementById('example'));
Для визуализации Реагировать компонент, просто создать локальную переменную начало с большой буквы.
var MyComponent = React.createClass({/*ru.*/}); var myElement = <MyComponent someProperty={true} />; ReactDOM.render(myElement, document.getElementById('example'));
Отреагирует JSX использовать верхние и нижние условные тематические различать классы местных компонентов и HTML-тегов.
Примечание:
Поскольку JSX является JavaScript, ряд идентификаторов , таких как
class
, иfor
не рекомендуется в качестве имени атрибута XML. В качестве альтернативы Реагировать DOM использоватьclassName
иhtmlFor
сделать соответствующее свойство.