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

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

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

Я знаю, что вы можете указывать стили в классах React, например так: var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Должен ли я стремиться делать все стили таким...

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

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

Учитывая простой компонент, который делает его потомки: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Вопрос: Каким должен быть...

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

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

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

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

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

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

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

Любопытно, как правильно подойти к этому: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange}...

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

У меня есть очень простой функциональный компонент: 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 {...

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

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

Я запускаю 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}...

У меня есть файл test_stuff.js, с которым я работаю npm test Это примерно так: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function() {...