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

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

889 javascript  reactjs  react-jsx 

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

690 reactjs  react-jsx 

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

512 css  reactjs  inline-styles  react-jsx 

Я читаю раздел формreactjsдокументацию и только что попробовал этот код, чтобы продемонстрировать onChangeиспользование ( JSBIN ). var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} onChange={this.handleChange}/> ); …

326 javascript  reactjs  react-jsx 

У меня относительно простая проблема - попытка добавить встроенные сценарии в компонент React. Что у меня так далеко: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from '../../core/util'; export default class extends Component { render() { return ( <DocumentTitle …

266 javascript  reactjs  ecmascript-6  react-jsx 

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

229 javascript  reactjs  react-jsx 

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

204 javascript  html  frontend  reactjs  react-jsx 

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

168 javascript  reactjs  react-jsx 

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

146 javascript  jquery  reactjs  react-jsx 

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

115 javascript  reactjs  react-jsx 

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

111 javascript  html  reactjs  react-jsx 

У меня есть файл 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() { describe('#indexOf()', function() { it('should return -1 when the …

102 javascript  reactjs  npm  react-jsx 

Я понимаю, как (и почему ) добавить пробел в JSX, но мне интересно, что лучше всего делать и есть ли реальная разница? Оберните оба элемента в промежуток <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> Добавьте их в одну строку <div className="top-element-formatting"> Hello <span className="second-word-formatting">World!</span> </div> Добавить пространство с помощью JS …

96 javascript  reactjs  react-jsx 

Я использую Sublime Text в качестве текстового редактора. Есть jsFormat для форматирования файлов javascript, но я не могу найти его для JSX. Как вы, ребята, справляетесь с форматированием JSX?

91 reactjs  sublimetext  react-jsx 

Я хочу привязать, чтобы закрыть всплывающее окно загрузки активного ответа при escapeнажатии. Вот код _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, Но при нажатии любой клавиши в консоли ничего …

86 reactjs  react-jsx  react-bootstrap