• Как прокинуть стили в компонент?

    maksipes
    @maksipes Автор вопроса
    В общем, поковырялся я и сделал так, вдруг кому будет полезно:
    import React from "react";
    import { withStyles } from "@material-ui/core/styles";
    
    const styles1 = {
      style: {
        color: "red"
      }
    };
    
    const styles2 = {
      style: {
        color: "blue"
      }
    };
    
    const App = props => {
      const { classes } = props;
      return (
        <div className={classes.style}>
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
        </div>
      );
    };
    
    const AppWithStyle = props => {
      const { alterStyle } = props;
    
      const Component = withStyles(alterStyle ? styles2 : styles1)(App);
      return <Component {...props} />;
    };
    
    export default AppWithStyle;


    Естественно наверху вызываем этот компонент с пропсиной, если нужно другие стили применить, или без нее, если нужны дефолтные стили.

    const rootElement = document.getElementById("root");
    ReactDOM.render(
      <React.StrictMode>
        <AppWithStyle alterStyle />
      </React.StrictMode>,
      rootElement
    );
    Ответ написан
    Комментировать
  • Можно ли как-то заменить стрелочную функцию?

    maksipes
    @maksipes
    Если написать sayHello обычной функцией - свойств не будет найдено, ибо у этой функции будет свой this, отличный от функции лежащей выше - у каждой из них есть свой this.

    У стрелочных функций своего this нет, следовательно this будет искаться дальше на уровень выше. И вот тут получается, что найдется this "родительской" функции, который как раз и нужен.

    Стрелочная функция всегда "видит" this объекта/функции, где была объявлена.

    Так я себе представляю это. Не претендую на точность.
    Ответ написан
    Комментировать
  • Как устроить взаимодействие React компонентов в существующем проекте?

    maksipes
    @maksipes Автор вопроса
    Если кому-то вдруг тоже самое понадобится, вот хороший пример (не мой)

    {
    ...
      render() {
        const { dateStr } = this.state;
    
        return (
          <React.Fragment>
              {ReactDOM.createPortal(
                <HeaderContent dateStr={dateStr} />,
                document.getElementById("header")
              )}
              <div>This is the main content</div>
              {ReactDOM.createPortal(
                <Footer text="this is cool footer text" />,
                document.getElementById("footer")
              )}
          </React.Fragment>
        );
      }
    }
    
    ReactDOM.render(<MyApp />, document.getElementById("main"));
    Ответ написан