Ответы пользователя по тегу React
  • Что я делаю не так с модульными стилями?

    @ned4ded
    Верстка, Фронтенд
    Селектор .col.s12 имеет большую специфичность, чем css-класс из модуля. Чтобы исправить отделите структуру грида от структуры компонента:
    import React, {Component} from 'react'
    import styles from './Videos.module.css'
    
    export default class Videos extends Component{
        render(){
            return(
                <div id="test1" className={`row ${styles.VideoRoom}`}>
                    <div className="col s12 center grey lighten-3">
                       <div className={styles.HostVideo}>
                          Видео хоста
                       </div>
                    </div>
                </div>
            );
        }
    }


    Либо если хотите именно переопределять стили колонки, то попробуйте воспользоваться директивой :global(.class) в css-модулях (подробнее). Должно получиться что-то вроде :global(.col).HostVideo.

    О специфичности можно почитать: тут, тут.
    Ответ написан
  • Как обратиться к контексту, у которого нет имени?

    @ned4ded
    Верстка, Фронтенд
    Нет, нельзя.

    В useContext() нужно передавать ссылку на объект контекста, которую вы не сохранили. В js к необъявленным объектам невозможно получить доступ. Более того, как только ссылка на объект не используется, сам объект удаляется garbage collector'ом.

    const MyContext = React.createContext();
    
    const {
        Provider: CompaniesStoreServiceProvider,
        Consumer: CompaniesStoreServiceConsumer
    } = MyContext;
    
    useContext(MyContext);


    Как вариант, вы можете сделать хелпер/декортатор, который будет создавать контекст и возвращать объект, содержащий ссылку на контекст, провайдер и консьюмер; деструктурировать уже его.
    Ответ написан
  • Как собрать шаблон под React + Typescript?

    @ned4ded
    Верстка, Фронтенд
    У вас не установлен лоадер для typescript.

    Есть 2 варианта, 1ый - ts-loader, 2ой - babel-loader c typescript пресетом.

    Я предпочитаю второй, но в таком случае напрямую бабель не будет производить проверку типов и нужно использовать плагин fork-ts-checker. Проверка типов будет происходить параллельно с процессом компиляции вебпака.

    Вот пример для бабель-лоадера.

    // webpack.config 
    
    module.exports = {
        module: {
            rules: [
                {
                    oneOf: [
                        {
                            test: /\.(js|jsx|ts|tsx)$/,
                            exclude: /(node_modules|bower_components)/,
                            loader: 'babel-loader',
                            options: {
                                cacheDirectory: true,
                            },
                        },
    
                        {
                            use: 'file-loader',
                            exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
                        },
    
                        // ** STOP ** Are you adding a new loader?
                        // Make sure to add the new loader(s) before the "file" loader.
                    ],
                },
            ],
        },
    
        plugins: [
            new ForkTsCheckerWebpackPlugin({
                async: true,
                useTypescriptIncrementalApi: true,
                checkSyntacticErrors: true,
                eslint: true,
            }),
        ],
    };
    
    // babelrc
    
    {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-typescript"
        ],
    }


    Не забудьте установить пресеты, лоадеры и плагин.

    PS, можете подсмотреть конфиг для create-react-app, там можно выудить много интересного.
    Ответ написан
  • Как передавать свойства между одностраничными компонентами?

    @ned4ded
    Верстка, Фронтенд
    Вам нужен либо стор (Mobx, Redux), либо родительский компонент, внутри которого будет происходит взаимодействие двух дочерних

    console.log(Message.state.value);

    Здесь вы обращаетесь к статическому свойству класса Message, конечно это не будет работать
    Ответ написан
  • Почему выбивает ошибку в функции?

    @ned4ded
    Верстка, Фронтенд
    Добрый день.

    Метод getItem возвращает либо Products, либо undefined, если продукт не найден. Сделайте терминальное условие и укажите строгую типизация для используемого массива далее.

    addToCart = (id: number) => {
      let tempProduct: Products[] = [...this.state.products];
      const item = this.getItem(id);
      if(item === undefined) {
        // ... инструкция при возникновении терминального условия, например, ошибка
        return;
      }
      const index = tempProduct.indexOf(item as Products); // строгая типизация для item
            
      // ...
    };


    Возможно, если вы укажите тип возвращаемого значения, то не потребуется терминальное условие (но это нужно проверить, я так навскидку не могу утверждать со 100% уверенностью). Такой подход подвержен багам при исполнении js.

    getItem = (id: number): Products => {
      return this.state.products.find(item => item.id === id);
    };


    BTW, я бы не стал называть на вашем месте тип Products во мн. ч. Просто Product, т.к. по сути это единичная сущность.
    Ответ написан