Запитання з тегом «react-jsx»

Я намагаюся знайти правильний спосіб визначити деякі компоненти, які можна було б використовувати загальним чином: <Parent> <Child value="1"> <Child value="2"> </Parent> Існує логіка для візуалізації між батьківськими та дочірніми компонентами, звичайно, ви можете уявити <select>і <option>як приклад цієї логіки. Це фіктивна реалізація з метою питання: var Parent = React.createClass({ doSomething: …

888 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 title="People"> <article …

264 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> ); } …

203 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. Це добре, але що робити, …

145 javascript  jquery  reactjs  react-jsx 

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

113 javascript  reactjs  react-jsx 

Я намагаюся розпочати створення сайту в ReactJS. Однак, коли я намагався помістити свій JS в окремий файл, я почав отримувати цю помилку: "Uncaught SyntaxError: Несподіваний маркер <". Я спробував додати /** @jsx React.DOM */вгору файл JS, але він нічого не виправив. Нижче наведено файли HTML та JS. Будь-які ідеї щодо …

110 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 …

101 javascript  reactjs  npm  react-jsx 

Я використовую Sublime Text як текстовий редактор. Існує jsFormat для форматування файлів javascript, але я не можу знайти його для JSX. Як ви, хлопці, маєте справу з форматуванням JSX?

91 reactjs  sublimetext  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> Додайте простір за допомогою …

91 javascript  reactjs  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