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

Я использую ReactJS, и когда пользователь щелкает ссылку, я хочу скопировать текст в буфер обмена. Я использую Chrome 52, и мне не нужно поддерживать другие браузеры. Я не понимаю, почему этот код не приводит к копированию данных в буфер обмена. (происхождение фрагмента кода взято из сообщения Reddit). Я делаю это …

168 javascript  reactjs  clipboard 

Я могу поразить эту конечную точку http://catfacts-api.appspot.com/api/facts?number=99через Почтальон, и она возвращаетсяJSON Кроме того, я использую create-реагировать-приложение и хотел бы избежать настройки любого сервера конфигурации. В моем клиентском коде я пытаюсь использовать fetchто же самое, но я получаю ошибку: В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Поэтому происхождение ' http: // localhost: …

167 javascript  reactjs  cors  create-react-app  fetch-api 

В настоящее время я прохожу учебники React-Native. Я начал с учебного пособия «Приступая к работе», в котором я создал новый собственный реактивный проект и успешно запустил его на своем устройстве. Затем я запустил учебник Props , скопировал фрагмент кода и снова попытался запустить проект, и на моем экране появилось следующее …

166 javascript  facebook  reactjs  react-native 

В Реакте 16.2 улучшенная поддержка Fragmentsбыла добавлена. Более подробную информацию можно найти в блоге React здесь. Мы все знакомы со следующим кодом: render() { return ( // Extraneous div element :( <div> Some text. <h2>A heading</h2> More text. <h2>Another heading</h2> Even more text. </div> ); } Да, нам нужен контейнерный …

165 reactjs 

class PlayerControls extends React.Component { constructor(props) { super(props) this.state = { loopActive: false, shuffleActive: false, } } render() { var shuffleClassName = this.state.toggleActive ? "player-control-icon active" : "player-control-icon" return ( <div className="player-controls"> <FontAwesome className="player-control-icon" name='refresh' onClick={this.onToggleLoop} spin={this.state.loopActive} /> <FontAwesome className={shuffleClassName} name='random' onClick={this.onToggleShuffle} /> </div> ); } onToggleLoop(event) { // "this …

164 javascript  reactjs  this 

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

163 reactjs  jsx 

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

163 javascript  html  reactjs  jsx 

Может кто-нибудь объяснить разницу между <Route exact path="/" component={Home} /> и <Route path="/" component={Home} /> Я не знаю значение слова "точный"

163 reactjs  react-router  react-router-dom 

В настоящее время я создаю одностраничное приложение с использованием reactjs. Я читал, что многие причины неиспользования localStorage связаны с уязвимостями XSS. Поскольку React экранирует все данные, вводимые пользователем, будет ли теперь безопасно использовать localStorage?

163 reactjs  local-storage  jwt 

Я использую приложение create-response-app. Я пытаюсь вызвать изображение из моей общей папки из файла внутри моего src/components. Я получаю это сообщение об ошибке. ./src/components/website_index.js Модуль не найден: вы попытались импортировать ../../public/images/logo/WC-BlackonWhite.jpg, который находится за пределами каталога проекта src /. Относительный импорт за пределами src / не поддерживается. Вы можете переместить …

162 javascript  reactjs  webpack  create-react-app 

react-native run-androidКоманда заканчивается, оставив сообщение в симуляторе Android. Сообщение выглядит следующим образом: Невозможно загрузить скрипт. Убедитесь, что вы используете сервер Metro или что ваш пакет 'index.android.bundle' правильно упакован для выпуска. Что я делаю не так?

161 reactjs  react-native  react-native-android  react-native-cli  metro-bundler 

Как получить высоту области просмотра в ReactJS? В обычном JavaScript я использую window.innerHeight() но используя ReactJS, я не уверен, как получить эту информацию. Я понимаю, что ReactDOM.findDomNode() работает только для созданных компонентов. Однако это не относится к элементу documentor body, который может дать мне высоту окна.

161 javascript  reactjs  window  viewport 

Я не могу понять, как установить значения свойств по умолчанию для моих компонентов с помощью 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> ); } } …

161 reactjs  typescript  tsx 

У меня есть следующее состояние: this.setState({ selected: { id: 1, name: 'Foobar' } }); Затем я обновляю состояние: this.setState({ selected: { name: 'Barfoo' }}); Поскольку setStateпредполагается слияние, я ожидаю, что это будет: { selected: { id: 1, name: 'Barfoo' } }; Но вместо этого он ест идентификатор и состояние: { …

160 javascript  reactjs 

Это пример со страницы приложения Google AdSense. Экран загрузки, отображаемый до главной страницы, отображается после. Я не знаю, как сделать то же самое с React, потому что, если я создаю экран загрузки, отображаемый компонентом React, он не отображается во время загрузки страницы, потому что ему нужно ждать, пока DOM будет …

160 reactjs  asynchronous  redux