Понимание того, как сделать сайт React мобильным

Question

Я играл с реагирующим , чтобы понять, как сделать сайты мобильными. По сути, я хочу передать значение из функции, которая проверяет размер экрана просмотра, как у мобильного телефона. Практически украденный из документации о реагировании, у меня есть функция в файле с именем Mobile. js следующим образом:

const Mobile = () => {
  const mobile = useMediaQuery({ query: '(max-width: 1000px)' })
  return (
    <div>
      {mobile && <p>You are sized like a mobile phone</p>}
    </div>
  );
}

Однако, что я хочу сделать, это передать логическое значение " mobile "в другие классы в других js файлах, где я могу затем использовать различные CSS classNames в зависимости от значения этого логического значения.

У меня есть 3 конкретных c вопроса.

1. Как бы я вернул логический мобильный телефон из функции Mobile для использования?

2. Как мне получить доступ к этому возвращенному логическому значению?

3. Как бы я изменил имя класса для div в зависимости от значения этого логического значения?

Довольно плохо знаком с веб-разработкой (особенно React) и эти вопросы кажутся очень простыми и легко решаемыми, но по какой-то причине я просто не могу понять это своими собственными онлайн-исследованиями. Очень хотелось бы прямой помощи, а также некоторые ресурсы, где я мог бы узнать больше. Огромное спасибо!

Для меня в идеальном мире правильный код выглядел бы так в моей голове. Не уверен, насколько далеко я нахожусь, но я надеялся, что, возможно, это послужит некоторым руководством относительно того, как я думаю.

В файле функций

// FILE Mobile.js
const Mobile = () => {
  const mobile = useMediaQuery({ query: '(max-width: 1000px)' })
  return (
    { mobile } // how to return a value?
  );
}

export default Mobile;

В другом файле ,

// FILE OtherClass.js
import Mobile from './Mobile';
class OtherClass extends Component {

  constructor(props) {
    super(props);

    this.state = { mobile: <Mobile /> } // how to access the returned value?
  }


  render() {
    return (
      <div>
        {this.state.mobile && <div className="text-mobile">} // how to change the className depending on value?
        {!this.state.mobile && <div className="text-desktop">}
          blah blah blah blah blah
        </div>
      </div>
    );
  }
}

Answer 1

Спасибо за вопрос и добро пожаловать в разработку React!

Вот как я могу вам помочь

Как бы я вернул логический мобильный телефон из функции Mobile для использования?

Как мне получить доступ к этому возвращенному логическому значению?

Поскольку вы вызываете ловушку useMediaQuery, вам также понадобится ловушка для ее повторного использования и возврата ее значения:

function useIsMobile() {
   const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
   return isMobile
}
//Then you can share this logic in other components
function Component1(){
   const isMobile = useIsMobile()
   ...
}
function Component2(){
   const isMobile = useIsMobile()
   ...
}

Обратите внимание, что вы не можете использовать хуки внутри class компонентов.

Как мне изменить className элемента div в зависимости от значения этого логического значения?

Это просто:

function Component(){
   const isMobile = useIsMobile()
   const className = isMobile ? 'mobile-class' : 'desktop-class'
   return <div className={className}>...</div>
}

Если вам нужны более сложные logi className c, вы можете оформить имена классов пакета , что позволяет очень легко активировать / деактивировать классы.

Answer 2

Возможно, я неправильно понимаю, но я думаю, что если бы я реализовал его в соответствии с 3 вашими вопросами, это было бы примерно так:

const MyComponent = () => {
  // the point of using hooks is to use it whenever you need it (you "hook it")
  const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
  const textStyle = isMobile ? 'text-mobile' : 'text-mobile';

  return (
    <div className={textStyle}>
    enter code here
    </div>
  )
}

Надеюсь, это поможет:)

---

Редактировать

Для повторного использования этой логики c вы можете вместо этого сделать компонент div-оболочки:

const MyWrapperComponent = (props) => {
  const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
  const textStyle = isMobile ? 'text-mobile' : 'text-mobile';

  return (
    <div className={textStyle}>
     {props.children}
    </div>
  )
}

// Then you can use it like so:

const HomePage = () => (
   <MyWrapperComponent>
     write the rest of the code here
   </MyWrapperComponent>
)

Дочерние элементы - это родные подпорки реагировать, в сущности, просто означает, что это то, что вы предоставляете между тегами компонента, который их получает:)

Надеюсь, это поможет!