react

react hooks Хуки и connect() (redux)


import { makeStyles } from '@material-ui/core/styles';
//............


const useStyles = makeStyles(theme => ({
  '@global': {
    body: {
      backgroundColor: theme.palette.common.white,
    },
  },
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

react export '....' was not found in 'react-bootstrap', (ControlLabel, Grid, Menu item) bootstrap ошибка

"export 'ControlLabel' was not found in 'react-bootstrap'
warning in ....

"export 'Grid' was not found in 'react-bootstrap'
warning in ...

"export 'MenuItem.......' was not found in 'react-bootstrap'
warning in .......

Grid -> Container
MenuItem -> Dropdown.Item
ControlLabel -> FormLabel

Причем для 1 и 3 компонента можно просто использовать as при импорте...

react Сторонний внешний скрипт удаляет элмент - ошибка при повторном рендеринге: NotFoundError: Node was not found

Ошибка типа:

NotFoundError: Node was not found......
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

возникает если DOM элемент удаляет со страницы не реактом, а сторонней библиотекой.

react Пустой html атрибут без значения

В некоторых случаях можно просто подставить пустую строку (напр. если эти атрбиты необходимы для вашего CSS фреймворка наподобие uikit, т.е. вместо:

<div class="uk-alert-danger" uk-alert>
	<a class="uk-alert-close" uk-close></a>
	<p>Ошибка авторизации: неверное имя пользователя или пароль!</p>
</div>

Пишем:

react Один обработчик для ввода в разные поля формы

Если вам не надо перехватывать ввод в поле, но нужно запоминать состояние, то используйте подход вроде:

react props Значения по умолчанию для пропсов

Если значений мало можно просто завести динамически определяемые переменные, напр. в данном случае одну (var text ):

import React from 'react';
import jswl from 'js-wrapper-lib';

class SubmitButton extends React.Component {

  render() {
    var text = jswl.isEmpty(this.props.name) ? 'default_text!' : this.props.name;
    return (
        <button type="submit" class="uk-button uk-button-primary uk-border-pill uk-width-1-1">
            {text} 
        </button>
    );
  }
}

export default SubmitButton;

Ошибка Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment

Syntax Error: SyntaxError: Adjacent JSX elements must be wrapped
 in an enclosing tag. Did you want a JSX fragment <>...</>?

Рабочим оказывается вариант вроде:

symfony react.js Как добавить его с помощью npm (без yarn)

Ставим 4-ре пакета двумя командами:

npm install --save-dev @babel/preset-react
npm install  react react-dom prop-types

далее правим webpack.config.js:

// webpack.config.js
// ...

Encore
    // ...
+     .enableReactPreset()
;

ПРИМЕЧАНИЯ:

Pages

Subscribe to RSS - react