Вопросы по тегу: reactjs

(334)

Производительность большого списка с React

Я создаю фильтруемый список с помощью React. Структура списка показана на изображении ниже.ПОМЕЩЕНИЕВот описание того, как это должно работать: Состояние находится в компоненте самого высокого уровня, компоненте Поиск. Состояние описывается следующим образом: { visible : boolean, files : array, filtered : array, query : string, currentlySelectedIndex : integer } files — потенциально очень большой массив, содержащий пути к файлам (10000 записей — правдоподобное число). filtered — это отфильтрованный массив после того, как пользователь введет не менее 2 символов. Я знаю, что это производные данные, и поэтому можно привести аргумент о сохранении их в состоянии, но это необходимо для currentlySelectedIndex который является индексом текущего выбранного элемента из отфильтрованного списка. Пользователь вводит более 2 букв в компонент Input, массив фильтруется и для каждой записи в отфильтрованном массиве отображается компонент Result* 100023* Каждый компонент Результат отображает полный путь, который частично соответствует запросу, а часть пути с частичным совпадением выделена. Например, DOM компонента Result, если пользователь ввел «le», будет выглядеть примерно так: это/является/файломфайл/путь Если пользователь нажимает клавиши вверх или вниз, когда компонент Input сфокусирован, currentlySelectedIndex изменяется на основе массива filtered. Это приводит к тому, что компонент Result, соответствующий индексу, помечается как выбранный, вызывая повторный рендеринг ПРОБЛЕМАПервоначально я протестировал это с достаточно небольшим массивом из файлов, используя разрабатываемую версию React, и все работало нормально.Проблема возникла, когда мне пришлось иметь дело с массивом files размером до 10000 записей. Ввод 2 букв в поле ввода привел бы к созданию большого списка, и когда я нажимал клавиши вверх и вниз для навигации по нему, он сильно тормозил.Сначала у меня не было определенного компонента для элементов Result, и я просто составлял список на лету, при каждом рендеринге компонента Search, как таковой:results = this.state.filtered.map(function(file, index) { var start, end, matchIndex, match = this.state.query; matchIndex = file.indexOf(match); start = file.slice(0, matchIndex); end = file.slice(matchIndex + match.length); return ( {start} {match} {end} ); }.bind(this)); Как вы понимаете, каждый раз, когда currentlySelectedIndex изменялся, это вызывало повторную визуализацию, и список каждый раз создавался заново. Я думал, что, поскольку я установил значение key для каждого элемента li, React избежит повторного рендеринга каждого другого элемента li, у которого нет его className измениться, но видимо это было не так.В итоге я определил класс для элементов Result, где он явно проверяет, должен ли каждый элемент Result повторно отображаться на основе того, был ли он выбран ранее и на основе текущего пользовательский ввод:var ResultItem = React.createClass({ shouldComponentUpdate : function(nextProps) { if (nextProps.match !== this.props.match) { return true; } else { return (nextProps.selected !== this.props.selected); } }, render : function() { return ( {this.props.children} ); } }); И список теперь создан как таковой: results = this.state.filtered.map(function(file, index) { var start, end, matchIndex, match = this.state.query, selected; matchIndex = file.indexOf(match); start = file.slice(0, matchIndex); end = file.slice(matchIndex + match.length); selected = (index === this.state.currentlySelected) ? true : false return ( {start} {match} {end} ); }.bind(this)); } Это улучшило производительность немного, но все равно недостаточно. Дело в том, что когда я тестировал производственную версию React, все работало плавно, без задержек.НИЖНЯЯ ЛИНИЯТакое заметное расхождение между разрабатываемой и производственной версиями React нормально?Я понимаю/делаю что-то не так, когда думаю о том, как React управляет списком? ОБНОВЛЕНИЕ 14-11-2016Я нашел эту презентацию Майкла Джексона, где он решает проблему, очень похожую на эту: https://youtu.be/7S8v8jfLb1Q?t=26m2sРешение очень похоже на решение, предложенное Аскаровым Бекнаром ответ, нижеОБНОВЛЕНИЕ 14-4-2018Поскольку это, по-видимому, популярный вопрос, и с тех пор, как был задан первоначальный вопрос, дела пошли дальше, хотя я рекомендую вам посмотреть видео по ссылке выше, чтобы получить представление о виртуальном макете, я также рекомендую вам использовать библиотеку React Virtualized, если вы не хотите заново изобретать велосипед.
D

Dimitris Karagiannis

6 лет назад

Ответов: 9

Стиль React-Native Button не работает

Импортировать_этоимпорт {AppRegistry, Text, View, Button, StyleSheet} из 'React-Native'; Это мой код кнопки React, но стиль не работает Заяц... Также пробовал по этому коду Нажмите на меня! Обновить вопрос:Также я пробовал вот так..ку ка Стильпостоянные стили = StyleSheet.create({ стиль кнопки: { красный цвет', полеВерх: 20, набивка: 20, backgroundColor: зеленый } }); Но нет вывода: Скриншот моего телефона: -
M

MD Ashik

5 лет назад

Ответов: 14

Использование async/await внутри функционального компонента React

Я только начинаю использовать React для проекта, и мне очень сложно включить асинхронную/ожидающую функциональность в один из моих компонентов.У меня есть асинхронная функция с именем fetchKey, которая получает ключ доступа от API, который я обслуживаю через AWS API Gateway:const fetchKey = async authProps => { try { const headers = { Authorization: authProps.idToken // using Cognito authorizer }; const response = await axios.post( "https://MY_ENDPOINT.execute-api.us-east-1.amazonaws.com/v1/", API_GATEWAY_POST_PAYLOAD_TEMPLATE, { headers: headers } ); return response.data.access_token; } catch (e) { console.log(`Axios request failed! : ${e}`); return e; } }; Я использую тему пользовательского интерфейса React Material и отказываюсь использовать один из его шаблонов Dashboard. К сожалению, в шаблоне Dashboard используется функциональный компонент без сохранения состояния:const Dashboard = props => { const classes = useStyles(); const token = fetchKey(props.auth); console.log(token); return ( ... rest of the functional component's code Результатом моего console.log(токена) является обещание, которое ожидается, но скриншот в моем браузере Google Chrome несколько противоречив - он находится в ожидании или решен? Во-вторых, если я попробую вместо token.then((данные, ошибка)=> console.log(данные, ошибка)), я получу undefined для обеих переменных. Мне кажется, это указывает на то, что функция еще не завершена и, следовательно, не разрешила никаких значений для data или error. Тем не менее, если я попытаюсь поставить const Dashboard = async props => { const classes = useStyles(); const token = await fetchKey(props.auth); React сильно жалуется:> react-dom.development.js:57 Uncaught Invariant Violation: Objects are > not valid as a React child (found: [object Promise]). If you meant to > render a collection of children, use an array instead. > in Dashboard (at App.js:89) > in Route (at App.js:86) > in Switch (at App.js:80) > in div (at App.js:78) > in Router (created by BrowserRouter) > in BrowserRouter (at App.js:77) > in div (at App.js:76) > in ThemeProvider (at App.js:75) Теперь я буду первым, кто заявит, что у меня недостаточно опыта, чтобы понять, что происходит с этим сообщением об ошибке. Если бы это был традиционный компонент класса React, я бы использовал метод this.setState для установки какого-то состояния, а затем пошел бы своим веселым путем. Однако у меня нет такой опции в этом функциональном компоненте.Как включить асинхронную/ожидающую логику в мой функциональный компонент React?Изменить: Так что я просто скажу, что я идиот. Фактически возвращаемый объект ответа не response.data.access_token. Это было response.data.Item.access_token. Дох! Вот почему результат возвращался как неопределенный, хотя фактическое обещание было разрешено.
Y

Yu Chen

2 года назад

Ответов: 4

Могу ли я добавить ключевую опору к фрагменту React?

Я генерирую dl в React: { highlights.map(подсветка => { const count = text.split(highlight).length - 1; возвращение ( <> {highlight} {count} ); }) } Это дает мне предупреждение: Предупреждение: каждый дочерний элемент в списке должен иметь уникальный ключевой реквизит. Это удалит предупреждение, но не сгенерирует нужный мне HTML: { highlights.map(подсветка => { const count = text.split(highlight).length - 1; возвращение ( {выделение {количество ); }) } И я не могу добавить реквизит key к фрагменту (<> ).Как это обойти?Я использую React 16.12.0.
s

sdgfsdh

2 года назад

Ответов: 2

React setState не обновляется немедленно

Я работаю над приложением todo. Это очень упрощенная версия вредоносного кода. У меня есть флажок: Writing Item Вот функция, которая вызывает флажок:checkPencil(){ this.setState({ pencil:!this.state.pencil, }); this.props.updateItem(this.state); } updateItem — это функция, которая сопоставлена ​​с отправкой в ​​reduxfunction mapDispatchToProps(dispatch){ return bindActionCreators({ updateItem}, dispatch); } Моя проблема в том, что когда я вызываю действие updateItem и console.log состояние, оно всегда отстает на 1 шаг. Если флажок не установлен и не соответствует действительности, я все равно получаю состояние true, передаваемое функции updateItem. Нужно ли вызывать другую функцию, чтобы принудительно обновить состояние?
l

lost9123193

5 лет назад

Ответов: 11

Как назначить правильный тип для React.cloneElement при передаче свойств дочерним элементам?

Я использую React и Typescript. У меня есть компонент реакции, который действует как оболочка, и я хочу скопировать его свойства своим дочерним элементам. Я следую руководству React по использованию элемента клонирования: https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement. Но при использовании React.cloneElement я получаю следующую ошибку от Typescript:Argument of type 'ReactChild' is not assignable to parameter of type 'ReactElement'.at line 27 col 39 Type 'string' is not assignable to type 'ReactElement'. Как я могу назначить правильный ввод для react.cloneElement?Вот пример, который повторяет приведенную выше ошибку:import * as React from 'react'; interface AnimationProperties { width: number; height: number; } /** * the svg html element which serves as a wrapper for the entire animation */ export class Animation extends React.Component{ /** * render all children with properties from parent * * @return {React.ReactNode} react children */ renderChildren(): React.ReactNode { return React.Children.map(this.props.children, (child) => { return React.cloneElement(child, { //
D

David C

5 лет назад

Ответов: 2

Формат изменения кода Visual Studio (React-JSX)

В моем index.js есть следующий фрагментclass App extends Component { render() { return ( Welcome to React! ) } } Код работает, но каждый раз, когда я сохраняю (ctrl+s), визуальная студия форматирует jsx следующим образом:class App extends Component { render() { return ( Welcome to React! ) } } Как это решить? спасибо
o

omer727

5 лет назад

Ответов: 16

Реагировать на разрыв строки отображения из сохраненной текстовой области

Использование Facebook Реакция. На странице настроек у меня есть многострочное поле textarea, где пользователь может вводить многострочный текст (в моем случае это адрес). Когда я пытаюсь отобразить адрес, что-то вроде {адрес}, он не показывает разрывы строк и все находится в одной строке.{address} Есть идеи, как это решить?
d

denislexic

6 лет назад

Ответов: 7

кнопка реакции на странице перенаправления кликов

Я работаю над веб-приложением, используя React и bootstrap. Когда дело доходит до применения кнопки onClick, мне трудно перенаправить мою страницу на другую. если после href я не могу перейти на другую страницу.Итак, не могли бы вы сказать мне, есть ли необходимость использовать реагирующую навигацию или что-то еще для навигации по странице с помощью Button onClick ?import React, { Component } from 'react'; import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink } from 'reactstrap'; class LoginLayout extends Component { render() { return ( ... Login Forgot password? ... ); } }
R

Raju yourPepe

4 года назад

Ответов: 15

Активная ссылка с React-Router?

Я пробую React-Router (v4), и у меня возникают проблемы с запуском Nav, чтобы одна из Linkбыла active. Если я нажму на любой из тегов Link, активный материал начнет работать. Однако я бы хотел, чтобы Home Link был активен, как только приложение запускается, так как это компонент, который загружается по маршруту /. Есть ли способ сделать это?Вот мой текущий код:const Router = () => ( Home {/* I want this to start off as active */} About )
S

Saad

5 лет назад

Ответов: 2

Как включить загрузку файлов на простой ввод пользовательского интерфейса React Material?

Я создаю простую форму для загрузки файла, используя шаблон электронной реакции с избыточной формой и интерфейсом материала.Проблема в том, что я не знаю, как создать поле ввода файла, потому что пользовательский интерфейс материала не поддерживает ввод загружаемого файла.Есть идеи, как этого добиться?
g

gintoki27

5 лет назад

Ответов: 11

Что эквивалентно ng-if в react.js?

Я собираюсь реагировать на использование angular и пытаюсь найти хорошую альтернативу реакции на директиву angular ng-if, где я визуализирую или не визуализирую элемент на основе условия. Возьмем, к примеру, этот код. Кстати, я использую typescript (tsx), но это не должно иметь большого значения."use strict"; import * as React from 'react'; interface MyProps {showMe: Boolean} interface MyState {} class Button extends React.Component { constructor(props){ super(props); this.state = {}; } render(){ let button; if (this.props.showMe === true){ button = ( SIGN UP ) } else { button = null; } return button; } } export default Button; Это решение работает, но есть ли другой способ, который обычно используется для достижения этого эффекта? Я просто догадываюсь
c

ceckenrode

6 лет назад

Ответов: 14

Как отобразить многострочную текстовую строку в React

Предположим, у меня есть текстовая строка, содержащая разрывы строк, и я отображаю ее следующим образом:render() { var text = "One\nTwo\nThree"; return {text}; } В HTML разрывы строк не отображаются как разрывы строк. Как мне это сделать в React? Я не хочу преобразовывать в теги и использовать dangerouslySetInnerHTML. Есть ли другой способ?
A

Aaron Beall

6 лет назад

Ответов: 10

React не отключает автозаполнение

Как мне заставить реагировать это?
Y

Yaroslav

6 лет назад

Ответов: 15

Повторяющийся идентификатор «LibraryManagedAttributes»

У меня та же проблема, что и в:React typescript (2312,14): повторяющийся идентификатор «LibraryManagedAttributes»иОшибка TypeScript: повторяющийся идентификатор «LibraryManagedAttributes»Но я никак не могу найти решение.Я уже обновился до последних версий node/npm/yarn/typescript. Также пробовал понизить. Ничего не помогает.yarn build --verbose yarn run v1.9.4 $ react-scripts-ts build --verbose Creating an optimized production build... Starting type checking and linting service... Using 1 worker with 2048MB memory limit ts-loader: Using typescript@3.0.3 and C:\dev\project\frontend\tsconfig.prod.json Warning: member-ordering - Bad member kind: public-before-private Failed to compile. C:/dev/project/frontend/node_modules/@types/prop-types/node_modules/@types/react/index.d.ts (2312,14): Duplicate identifier 'LibraryManagedAttributes'. error Command failed with exit code 1. --verbose почему-то не дает мне больше информации.Как я вижу LibraryManagedAttributes определяется в: node_modules/@types/react/index.d.ts node_modules/@types/prop-types/node_modules/@types/react/index.d.ts node_modules/@types/react-overlays/node_modules/@types/react/index.d.ts .... Откуда это? Как этого избежать?Я хочу выяснить, откуда возникает эта ошибка, чтобы сообщить о ней нужному объекту, но я не знаю, с чего начать.Что еще я могу попробовать?
S

Spenhouet

3 года назад

Ответов: 16

Не удается найти модуль '@babel/core'

Я следую этому руководству по webpack4/react:https://www.youtube.com/watch?v=deyxI-6C2u4Я следил за ним ровно до той части, где он запускает npm start. Разница в том, что его приложение запускается, а мое выдает ошибку:Не удается найти модуль '@babel/core'Полная ошибка:ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object. (C:\Users\joeyf\Desktop\Code\Github\webpack4-sample\node_modules\babel-loader\lib\index.js:5:15) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2] Я пытался переустановить babel-core, но ничего не нашел. Вот мой package.json:{ "name": "webpack4-sample", "version": "1.0.0", "description": "A sample setup of Webpack4 with React and Babel", "main": "index.js", "scripts": { "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }, "author": "Joey Fenny", "license": "ISC", "dependencies": { "babel": "^6.23.0", "babel-cli": "^6.26.0", "react": "^16.4.2", "react-dom": "^16.4.2" }, "devDependencies": { "babel-core": "^7.0.0-rc.4", "babel-loader": "^8.0.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "html-webpack-plugin": "^3.2.0", "webpack": "^4.17.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.6" } } Мой webpack.config.js:const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'index_bundle.js' }, module: { rules: [{ test: /\.js$/, exclude: path.join(__dirname, '/node_modules'), use: { loader: 'babel-loader' } }] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] } Вот ссылка на репозиторий git:https://gitlab.com/jfny/webpack4-sampleКто-нибудь знает, что происходит? Спасибо.
J

J. Doe

3 года назад

Ответов: 14

Как импортировать изображение (.svg, .png) в компонент React

Я пытаюсь импортировать файл изображения в один из моих реагирующих компонентов. У меня есть настройка проекта с веб-пакетомВот мой код компонента import Diamond from '../../assets/linux_logo.jpg'; export class ItemCols extends Component { render(){ return ( ) } } Вот структура моего проекта.Я настроил файл webpack.config.js следующим образом { test: /\.(jpg|png|svg)$/, loader: 'url-loader', options: { limit: 25000, }, }, { test: /\.(jpg|png|svg)$/, loader: 'file-loader', options: { name: '[path][name].[hash].[ext]', }, }, ПС. Я могу получить изображение из любого другого удаленного источника, но не локально сохраненного изображения. Консоль JavaScript также не дает мне никаких ошибок. Пожалуйста, что-нибудь поможет. Я новичок в реакции и не могу понять, что я делаю не так.
S

Shadid

5 лет назад

Ответов: 11

Есть ли возможность показать все описания тестов, когда я запускаю шуточные тесты?

Я использую шутку и фермент в своем проекте create-react-app. Когда я запускаю npm test, я получаю вывод, который показывает имена пройденных тестовых файлов, но я хотел бы, чтобы вывод также включал имена тестов.Пример: Кнопка.test.jsit ('renders button', () => { const button = shallow(); expect(toJson(button)).toMatchSnapshot(); }); Прямо сейчас, когда я запускаю тест npm, результат просто: PASS src/Button.test.js" и количество пройденных и не пройденных тестов (если тесты прошли успешно). Я хотел бы, чтобы вывод включал «кнопку рендеринга» и любые другие описания теста (например, как выглядит вывод при запуске теста rspec).
S

Sendai

4 года назад

Ответов: 5

как изменить возвращаемое значение функции jest mock в каждом тесте?

У меня есть подобный фиктивный модуль в тестовом файле компонента jest.mock('../../../magic/index', () => ({ navigationEnabled: () => true, guidanceEnabled: () => true })); эти функции будут вызываться в функции рендеринга моего компонента, чтобы скрыть и показать некоторые особенности.Я хочу сделать снимок различных комбинаций возвращаемого значения этих фиктивных функций.предположим, что у меня есть такой тестовый пример it('RowListItem should not render navigation and guidance options', () => { const wrapper = shallow( ); expect(enzymeToJson(wrapper)).toMatchSnapshot(); }); для запуска этого тестового примера я хочу изменить возвращаемые значения функций макетного модуля на false, как это динамическиjest.mock('../../../magic/index', () => ({ navigationEnabled: () => false, guidanceEnabled: () => false })); потому что я импортирую компонент RowListItem уже один раз, поэтому мой фиктивный модуль больше не импортируется. так что не изменится. как я могу это решить?
p

pashaplus

4 года назад

Ответов: 3

Могу ли я использовать mapDispatchToProps без mapStateToProps в Redux?

Я разбираю пример Redux, чтобы попытаться понять его. Я читал, что mapDispatchToProps позволяет отображать действия отправки в качестве реквизита, поэтому я подумал о переписывании addTodo.js для использования mapDispatchToProps вместо вызова dispatch(addTodo()). Я назвал это добавлениеTodo(). Что-то вроде этого:import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({addingTodo}) => { let input; return ( { e.preventDefault() if (!input.value.trim()) { return } addingTodo(input.value) input.value = "" }}> { input = node }} /> Submit ) } const mapDispatchToProps = { addingTodo: addTodo } AddTodo = connect( mapDispatchToProps )(AddTodo) export default AddTodo Однако, когда я запускаю приложение, я получаю эту ошибку: Ошибка: Недопустимое значение объекта типа для аргумента mapStateToProps при подключении компонента AddTodo.. Я никогда не использовал mapStateToProps для начала в компоненте AddTodo, поэтому я не был уверен, что не так. Моя интуиция подсказывает, что connect() ожидает, что mapStateToProps будет предшествовать mapDispatchToProps.Рабочий оригинал выглядит так:import React from 'react'; import {connect} from 'react-redux'; import addTodo from '../actions'; let AddTodo = ({dispatch}) => { let input; return ( { e.preventDefault() if (!input.value.trim()) { return } dispatch(addTodo(input.value)) input.value = "" }}> { input = node }} /> Submit ) } AddTodo = connect()(AddTodo) export default AddTodo Полный репозиторий можно найти здесь.Итак, мой вопрос: возможно ли сделать mapDispatchToProps без mapStateToProps? Является ли то, что я пытаюсь сделать, приемлемой практикой? Если нет, то почему?
I

Iggy

4 года назад

Ответов: 1

Функции недействительны в качестве дочернего элемента React. Это может произойти, если вы возвращаете компонент вместо рендеринга

Я написал компонент высшего порядка:import React from 'react'; const NewHOC = (PassedComponent) => { return class extends React.Component { render(){ return ( ) } } } export default NewHOC; Я использую это в своем App.js:import React from 'react'; import Movie from './movie/Movie'; import MyHOC from './hoc/MyHOC'; import NewHOC from './hoc/NewHOC'; export default class App extends React.Component { render() { return ( Hello From React!! ); } } Но я получаю предупреждение: Предупреждение: функции недействительны в качестве дочернего элемента React. Это может случиться, если вы возвращаете компонент вместо из рендеринга. Или, может быть вы хотели вызвать эту функцию, а не возвращать ее. в NewHOC (создано приложением) в div (создано приложением) в приложении Файл Movie.js:import React from "react"; export default class Movie extends React.Component{ render() { return Hello from Movie {this.props.name} {this.props.children} } } Что я делаю не так?
l

learner

4 года назад

Ответов: 12

ценность использования React.forwardRef против пользовательской опоры ref

Я вижу, что React.forwardRef кажется санкционированным способом передачи ссылки дочернему функциональному компоненту из документации по реакции:const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); Click me!; Однако в чем преимущество этого перед простой передачей пользовательского реквизита?:const FancyButton = ({ innerRef }) => ( {props.children} )); const ref = React.createRef(); Click me!; Единственное преимущество, о котором я могу думать, это, возможно, наличие согласованного API для ссылок, но есть ли какие-либо другие преимущества? Влияет ли передача пользовательского реквизита на диффинг, когда дело доходит до рендеринга, и вызывает ли он дополнительные рендеры, конечно же, не потому, что ссылка хранится как изменяемое состояние в поле current?Скажем, например, вы хотели передать несколько ссылок (что может указывать на запах кода, но все же), тогда единственным решением, которое я вижу, было бы использование реквизитов customRef.Полагаю, мой вопрос заключается в том, какова ценность использования forwardRef вместо пользовательского реквизита?
L

Lesbaa

2 года назад

Ответов: 2

Неудачная форма propType: вы указали значение `value` для поля формы без обработчика `onChange`

Когда я загружаю свое приложение для реагирования, я получаю эту ошибку в консоли. Предупреждение: ошибка формы propType: вы предоставили value реквизит для формы поле без обработчика onChange. Это сделает доступным только для чтения поле. Если поле должно быть изменяемым, используйте defaultValue. В противном случае, установите либо onChange, либо readOnly. Проверьте метод рендеринга AppFrame. Мой компонент AppFrame ниже:class AppFrame extends Component { render() { return ( ShireSoldiers Menu Dashboard Fixtures Players {this.props.children} ) } } export default AppFrame; Я изо всех сил пытаюсь понять, что я на самом деле делаю здесь неправильно. Приложение запускается и работает, но я пытаюсь удалить все предупреждения/ошибки консоли.
E

Elliot Pohath

5 лет назад

Ответов: 4

Каков правильный тип реквизита для ссылки в React?

Я храню ссылку в своем хранилище избыточности и использую mapStateToProps, чтобы предоставить ссылку для компонентов, которым требуется доступ к ней.Сохраненная ссылка выглядит так:ref={node => this.myRefToBePutInReduxGlobalStore = node} Какой правильный propType для этой ссылки?
d

danday74

4 года назад

Ответов: 4

Как использовать событие onClick для компонента React Link?

Я использую компонент Link из маршрутизатора reactjs и не могу заставить работать onClickevent. Это код:Here Это так или как-то иначе?
b

bier hier

5 лет назад

Ответов: 4

NPM — не удалось заменить env в конфигурации: ${NPM_TOKEN}

Я пытаюсь создать приложение для реагирования, но когда я выполняю команду npm -i, появляется следующая ошибка:Error: Failed to replace env in config: ${NPM_TOKEN} at /usr/local/lib/node_modules/npm/lib/config/core.js:415:13 at String.replace () at envReplace (/usr/local/lib/node_modules/npm/lib/config/core.js:411:12) at parseField (/usr/local/lib/node_modules/npm/lib/config/core.js:389:7) at /usr/local/lib/node_modules/npm/lib/config/core.js:330:24 at Array.forEach () at Conf.add (/usr/local/lib/node_modules/npm/lib/config/core.js:328:23) at ConfigChain.addString (/usr/local/lib/node_modules/npm/node_modules/config-chain/index.js:244:8) at Conf. (/usr/local/lib/node_modules/npm/lib/config/core.js:316:10) at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:78:16 /usr/local/lib/node_modules/npm/lib/npm.js:61 throw new Error('npm.load() required') ^ Error: npm.load() required at Object.get (/usr/local/lib/node_modules/npm/lib/npm.js:61:13) at process.errorHandler (/usr/local/lib/node_modules/npm/lib/utils/error-handler.js:205:18) at process.emit (events.js:182:13) at process._fatalException (internal/bootstrap/node.js:448:27) Я использую MacOS High Sierra. Я попытался установить NPM_TOKEN в качестве переменной среды с помощью следующей команды:set -x NPM_TOKEN = xyz , но это не работает. В чем проблема?
f

funtik

3 года назад

Ответов: 16

Реагировать на propTypes: objectOf vs shape?

В чем разница между PropTypes.objectOf и PropTypes.shape? В PropTypes:// An object with property values of a certain type optionalObjectOf: PropTypes.objectOf(PropTypes.number) по сравнению с// An object taking on a particular shape optionalObjectWithShape: PropTypes.shape({ color: PropTypes.string, fontSize: PropTypes.number }) Когда следует использовать objectOf и когда следует использовать shape?
D

DMac the Destroyer

4 года назад

Ответов: 2

Динамически добавлять дочерние компоненты в React

Моей целью является динамическое добавление компонентов на страницу/родительский компонент.Я начал с простого примера шаблона, подобного этому:main.js:var App = require('./App.js'); var SampleComponent = require('./SampleComponent.js'); ReactDOM.render(, document.body); ReactDOM.render(, document.getElementById('myId')); App.js:var App = React.createClass({ render: function() { return ( App main component! myId div ); } }); SampleComponent.js:var SampleComponent = React.createClass({ render: function() { return ( Sample Component! ); } }); Здесь SampleComponent подключен к узлу , который предварительно прописан в шаблоне App.js . Но что, если мне нужно добавить неопределенное количество компонентов в компонент приложения? Очевидно, что я не могу иметь все необходимые divs, сидящие там.После прочтения некоторых руководств я так и не понял, как компоненты создаются и динамически добавляются к родительскому компоненту. Как это сделать?
J

Justin Trevein

6 лет назад

Ответов: 4

Почему я не могу напрямую изменить состояние компонента?

Я понимаю, что руководства и документация React предупреждают в недвусмысленных выражениях, что состояние не должно изменяться напрямую и что все должно проходить через setState.Я хотел бы понять, почему я не могу просто напрямую изменить состояние, а затем (в той же функции) вызвать this.setState({}) просто для запуска рендеринга.Например: приведенный ниже код работает нормально:const React = require('реагировать'); константное приложение = React.createClass({ getInitialState: функция () { возвращение { немного: { скорее: { глубоко: { встроенный: { материал: 1, }, }, }, }, }, }; updateCounter: функция () { this.state.some.rather.deeply.embedded.stuff++; это.setState({}); // просто для запуска рендера... }, визуализация: функция () { возвращение ( Значение счетчика: {this.state.some.rather.deeply.embedded.stuff} Увеличить ); }, }); экспортировать приложение по умолчанию; Я полностью за соблюдение соглашений, но я хотел бы углубить свое понимание того, как на самом деле работает ReactJS и что может пойти не так, или это неоптимально с приведенным выше кодом.Примечания к документации this.setState в основном указывают на две ошибки: Что если вы измените состояние напрямую, а затем вызовете this.setState, это может заменить (перезаписать?) сделанную вами мутацию. Я не понимаю, как это может произойти в приведенном выше коде. Этот setState может эффективно мутировать this.state асинхронным/отложенным способом, то есть при доступе к this.state сразу после вызова this. setState вам не гарантируется доступ к окончательному измененному состоянию. Я понимаю, что это не проблема, если this.setState является последним вызовом функции обновления.
M

Marcus Junius Brutus

6 лет назад

Ответов: 7

Когда вам НЕ следует использовать памятку React?

Я недавно играл с React 16.6.0, и мне нравится идея React Memo, но я не смог найти все, что касается сценариев, наиболее подходящих для его реализации.Документация React (https://reactjs.org/docs/react-api.html#reactmemo), кажется, не предполагает каких-либо последствий, если просто применить ее ко всем вашим функциональным компонентам.Из-за поверхностного сравнения, чтобы выяснить, требуется ли повторный рендеринг, может ли когда-нибудь возникнуть ситуация, отрицательно влияющая на производительность? Подобная ситуация кажется очевидным выбором для реализации:// NameComponent.js import React from "react"; const NameComponent = ({ name }) => {name}; export default React.memo(NameComponent); // CountComponent.js import React from "react"; const CountComponent = ({ count }) => {count}; export default CountComponent; // App.js import React from "react"; import NameComponent from "./NameComponent"; import CountComponent from "./CountComponent"; class App extends Component { state = { name: "Keith", count: 0 }; handleClick = e => { this.setState({ count: this.state.count + 1 }); }; render() { return ( Add Count ); } } Поскольку имя никогда не изменится в этом контексте, имеет смысл запоминать.А как насчет ситуации, когда реквизит часто меняется? Что, если я добавлю еще одну кнопку, которая изменяет что-то еще в состоянии и запускает повторный рендеринг, имеет ли смысл обернуть CountComponent в memo, даже если этот компонент по дизайну предназначен для часто обновлять?Полагаю, мой главный вопрос: пока все остается чистым, бывает ли когда-нибудь ситуация, когда функциональный компонент не обертывается React Memo?
K

Keith Brewster

3 года назад

Ответов: 7

2022 WebDevInsider