reactjs- все статьи тега ➜ страница 5
Как я могу ответить на ширину элемента DOM с автоматическим размером в React?
У меня есть сложная веб-страница с использованием компонентов React, и я пытаюсь преобразовать страницу из статического макета в более отзывчивый, изменяемый размер макета. Тем не менее, я продолжаю сталкиваться с ограничениями с React, и мне интересно, есть ли стандартный шаблон для обработки этих проблем. В моем конкретном случае у меня есть компонент, который отображается как div с display:table-cell и width:auto. к сожалению, я не могу запросить ширина моего компонента, потому что вы не мож ...
Использование React в многостраничном приложении
Я играл вокруг с React и до сих пор мне очень нравится. Я создаю приложение с NodeJS и хотел бы использовать React для некоторых интерактивных компонентов в приложении. Я не хочу, чтобы это была одна страница приложения. Я еще не нашел в интернете ничего, что отвечало бы на следующие вопросы: как разбить или объединить мои компоненты React в многостраничном приложении? в настоящее время все мои компоненты в один файл, хотя я никогда не могу загрузить их в некоторых разделах приложения. до ...
Рендеринг raw html с помощью reactjs
Так это единственный способ рендеринга raw html с помощью reactjs? // http://facebook.github.io/react/docs/tutorial.html // tutorial7.js var converter = new Showdown.converter(); var Comment = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> <span dangerouslySetInnerHTML={{__ ...
ReactJS - как использовать комментарии
вы не можете использовать комментарии внутри render метод в компоненте React? у меня есть следующий компонент: 'use strict'; var React = require('react'), Button = require('./button'), UnorderedList = require('./unordered-list'); class Dropdown extends React.Component{ constructor(props) { super(props); } handleClick() { alert('I am click here'); } render() { return ( <div className="dropdown"> // whenClicked is a property not an event, per se ...
Может ли кто-нибудь объяснить разницу между реакцией односторонней привязки данных и двусторонней привязкой данных Angular
Я немного нечеткий на этих понятиях, если я создаю одно и то же приложение ToDo полностью в AngularJS и ReactJS--- что заставляет React ToDo использовать одностороннюю привязку данных против двухсторонней привязки данных AngularJS? Я понимаю, что реагировать вроде как работает Render (data) - - - > UI. чем это отличается от углового? ...
Реагировать.Компонент против реакции.PureComponent
чиновник React docs указано, что "React.PureComponent ' s shouldComponentUpdate() только поверхностно сравнивает объекты", и советует против этого, если состояние"глубокое". учитывая это, есть ли причина, по которой следует предпочесть React.PureComponent при создании компонентов React? вопросы: есть ли влияние на производительность при использовании React.Component что мы можем использовать React.PureComponent? я думаю shouldComponentUpdate() of PureComponent выполняет только поверхностные ...
Установка onSubmit в React.js
при подаче формы, я пытаюсь doSomething() вместо поведения по умолчанию post. видимо, реагировать, onSubmit-это поддерживаемое событие для форм. однако, когда я пытаюсь следующий код: var OnSubmitTest = React.createClass({ render: function() { doSomething = function(){ alert('it works!'); } return <form onSubmit={doSomething}> <button>Click me</button> </form>; } }); метод doSomething() выполняется, но после ...
Прочитать начальное состояние магазина в редукторе Redux
начальное состояние в приложении Redux может быть установлено двумя способами: передайте его в качестве второго аргумента createStore ( "документы" по ссылке) передайте его в качестве первого аргумента вашим (суб-)редукторам ( "документы" по ссылке) Если вы передаете начальное состояние в свой магазин, как Вы читаете это состояние из магазина и делаете его первым аргументом в своих редукторах? ...
Обновление объекта с помощью setState в React
возможно ли вообще обновить свойства объекта с помощью setState? что-то типа: this.state = { jasper: { name: 'jasper', age: 28 }, } Я пробовал: this.setState({jasper.name : 'someOtherName'}); и так: this.setState({jasper:{name:'someothername'}}) первая синтаксическая ошибка, а вторая просто ничего не делает. Есть идеи? ...
SVG использует тег и ReactJS
поэтому обычно, чтобы включить большинство моих значков SVG, которые требуют простого стиля, я делаю: <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> Теперь я играл с ReactJS в последнее время, оценивая его как возможный компонент в моем новом интерфейсном стеке разработки, однако я заметил, что в его списке поддерживаемых тегов/атрибутов ни один use или xlink:href поддерживаются. можно ли использовать спрайты svg и загружать их таким образом в ReactJS? ...
Значение свойства по умолчанию в компоненте React с использованием TypeScript
Я не могу понять, как установить значения свойств по умолчанию для моих компонентов с помощью Typescript. это исходный код: class PageState { } export class PageProps { foo: string = "bar"; } export class PageComponent extends React.Component<PageProps, PageState> { public render(): JSX.Element { return ( <span>Hello, world</span> ); } } и когда я пытаюсь использовать компонент такой: ReactDOM.render(<PageComponent />, do ...
Мокко тестирование не удалось из-за css в webpack
Я новичок в мокко, и я пытаюсь использовать его для тестирования простого компонента React. Тест будет проходить, если компонент react не имеет никакого стиля CSS, но выдает синтаксическую ошибку, если тег в компоненте React содержит любое имя класса: тестирование.реагировать.js import React from 'react'; export default class Testing extends React.Component { render() { return ( <section> <form> <input type="text" /> </form> ...
Как добавить шрифты для проектов на основе create-react-app?
Я использую create-react-app и предпочитают не eject. неясно, куда должны идти шрифты, импортированные через @font-face и загруженные локально. а именно, я загружаю @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } какие предложения? -- EDIT включая суть, на которую ссылается Дэн в своем ответе ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fo ...
React - как передать HTML теги в реквизит?
Я хочу иметь возможность передавать текст с тегами HTML, например: <MyComponent text="This is <strong>not</strong> working." /> но внутри MyComponent метод рендеринга, когда я распечатываю this.props.text, он буквально печатает все: This is <strong>not</strong> working. есть ли какой-то способ заставить реагировать парсить HTML и выбросить все это правильно? ...
"Символ" не определен в IE после использования babel
у меня есть reactjs приложение написано с использованием стандартов ES6, и я использую webpack чтобы построить его. Элемент webpack нагрузки js модули с помощью babel-loader. В частности, я использую следующие версии пакетов: ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected] однако после его создания IE 10 дает следующую ошибку 'Symbol' is undefined. Не должно быть babel предполагается определить Symbol? Есть ли какая-либо конкретная конфигурация для webpack ...
Как создать динамический href в функции react render?
Я делаю список сообщений. Для каждого сообщения я хотел бы отобразить тег привязки с идентификатором post как часть строки href. render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); как мне это сделать, чтобы каждый пост имел href из /posts/1,/posts/2 e ...
Динамический атрибут в ReactJS
Я хочу динамически включать / опускать атрибут disabled на элементе button. Я видел много примеров динамических атрибутов, но не самих атрибутов. У меня есть следующая функция рендеринга: render: function() { var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : ""; return <button {maybeDisabled}>Clear cart</button> } это вызывает ошибку синтаксического анализа из-за символа" {". Как я могу включить/опустить атрибут disabled на основе (логического) результата AppStore. ...
Как правильно проверить входные значения с помощью React.Джей?
У меня простая форма. Все компоненты и состояние хранятся в компоненте страницы. Есть 2 заголовка дисплея и 3 поля ввода. Первый ввод должен быть текстовым, а второй и третий-ints. Когда пользователь вводит неверный тип данных, я хочу, чтобы рядом с полем ввода появилось сообщение об ошибке. Мои вопросы касаются лучших практик в React.JS кто решает, что значение является допустимым? Я полагаю, что единственное задание поля ввода нужно ли возвращать значение компоненту, удерживающему состояние, ...
Расширение Реагирует.компоненты js
одна из вещей, которые я ценю больше всего о позвоночнике.js - это то, как простое и элегантное наследование работает. Я начинаю разбираться с React, и не могу найти ничего в react, что напоминает этот основной код var Vehicle = Backbone.View.extend({ methodA: function() { // ... } methodB: function() { // ... } methodC: function() { // ... } }); var Airplane = Vehicle.extend({ methodC: function() { // Overwrite methodC from super } }); в react мы у миксины, и исп ...
Что означает ошибка "тип элемента JSX '...' не имеет никаких сигнатур конструкции или вызова"?
Я написал код: function renderGreeting(Elem: React.Component<any, any>) { return <span>Hello, <Elem />!</span>; } Я получаю сообщение об ошибке: тип элемента JSX Elem не имеет никаких сигнатур конструкции или вызова что это значит? ...