Вопросы с тегом «jsx»

По вопросам о синтаксисе JSX, используемом React.js, Vue и другими интерфейсными платформами JavaScript, которые позволяют использовать встроенные XML-литералы в JavaScript для описания элементов HTML. Если ваш вопрос касается расширенной реализации Adobe JavaScript (ExtendScript), которая как минимум на пять лет старше React.js, используйте вместо этого тег [ExtendScript].

889
Как передать реквизит {this.props.children}

Я пытаюсь найти правильный способ определить некоторые компоненты, которые могут быть использованы в общем виде: <Parent> <Child value="1"> <Child value="2"> </Parent> Существует логика для рендеринга между родительскими и дочерними компонентами, конечно, вы можете себе...

690
Можете ли вы заставить компонент React перерисовываться без вызова setState?

У меня есть внешний (для компонента), наблюдаемый объект, который я хочу прослушивать на предмет изменений. Когда объект обновляется, он генерирует события изменения, а затем я хочу повторно визуализировать компонент при обнаружении любого изменения. На верхнем уровне React.renderэто было возможно,...

326
Почему вызов метода реагирования setState не изменяет состояние немедленно?

Я читаю раздел формreactjsдокументацию и только что попробовал этот код, чтобы продемонстрировать onChangeиспользование ( JSBIN ). var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) {...

266
Добавление тега скрипта в React / JSX

У меня относительно простая проблема - попытка добавить встроенные сценарии в компонент React. Что у меня так далеко: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from...

229
Как иметь условные элементы и сохранять СУХОЙ с JSX Facebook React?

Как дополнительно включить элемент в JSX? Вот пример использования баннера, который должен быть в компоненте, если он был передан. Чего я хочу избежать, так это дублирования HTML-тегов в операторе if. render: function () { var banner; if (this.state.banner) { banner = <div...

212
ReactJS - .JS против .JSX

Есть кое-что, что я нахожу очень запутанным при работе React. Есть много примеров, доступных в Интернете, которые используют .jsфайлы с реакцией, но многие другие используют .jsxфайлы. Я читал о .jsxфайлах, и я понимаю, что они просто позволяют вам писать HTML-теги в вашем javascript. Но то же...

204
Вставьте HTML с React Variable Statements (JSX)

Я строю что-то с React, где мне нужно вставить HTML с переменными React в JSX. Есть ли способ иметь переменную так: var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; и вставить его в реакцию, как это так, и это работает? render: function() { return (...

176
Как использовать componentWillMount () в React Hooks?

В официальных документах React упоминается - Если вы знакомы с методами жизненного цикла класса React, вы можете думать о useEffect Hook как о компонентах componentDidMount, componentDidUpdate и componentWillUnmount вместе. Мой вопрос - как мы можем использовать componentWillMount()метод жизненного...

168
React / JSX имя динамического компонента

Я пытаюсь динамически визуализировать компоненты в зависимости от их типа. Например: var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> Я попробовал решение, предложенное здесь...

163
Динамическое имя тега в jsx и React

Я пытаюсь написать компонент React. для тегов заголовков html (h1, h2, h3 и т. д.), где приоритет заголовка динамически изменяется в зависимости от приоритета, который мы определили в подпорках. Вот что я пытаюсь сделать. <h{this.props.priority}>Hello</h{this.props.priority}> ожидаемый...

163
Отобразить строку HTML как настоящий HTML в компоненте React

Вот что я попробовал и как все идет не так. Это работает: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Это не: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> Свойство description - это просто обычная строка содержимого HTML....

146
Как зациклить и визуализировать элементы в React.js без массива объектов для сопоставления?

Я пытаюсь преобразовать компонент jQuery в React.js, и одна из проблем, с которыми я сталкиваюсь, это рендеринг n элементов на основе цикла for. Я понимаю, что это невозможно, или рекомендуется, и что, когда в модели существует массив, имеет смысл использовать его полностью map. Это нормально, но...

141
TypeScript и React - детский тип?

У меня есть очень простой функциональный компонент: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; И еще один компонент: import * as React from "react"; export interface LayoutProps {...

115
Предупреждение: неизвестный класс свойств DOM. Вы имели в виду className?

Я только начал изучать React, добавив компонент с простой функцией рендеринга: render() { return <div class="myApp"></div> } Когда я запускаю приложение, я получаю следующую ошибку: Warning: Unknown DOM property class. Did you mean className? Я могу решить эту проблему, изменив classна...

111
ReactJS: «Неперехваченная ошибка SyntaxError: неожиданный токен <»

Я пытаюсь приступить к созданию сайта на ReactJS. Однако, когда я попытался поместить свой JS в отдельный файл, я начал получать эту ошибку: «Uncaught SyntaxError: Unexpected token <». Я пробовал добавить /** @jsx React.DOM */в начало JS-файла, но ничего не исправил. Ниже представлены файлы HTML...

105
Почему JSX-реквизиты не должны использовать стрелочные функции или привязку?

Я запускаю lint с моим приложением React и получаю эту ошибку: error JSX props should not use arrow functions react/jsx-no-bind И здесь я запускаю стрелочную функцию (внутри onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked}...