@Mysianio
вайти в айти

Как переключать стили разным компонентам?

Здравствуйте, давно уже наткнулся на такую проблему, как переключениями стиля в разных компонентах.
Что это значит:
У нас есть два компонента:
1.NewsBigScreen
2.NewsElement

Первый отвечает за отрисовку попапа с затемненным бэкграундом
Второй просто отрисовывает 'новость'.

Проблема состоит в том, что за переключение стилями ответственны две разные кнопки на разных элементах
Как это выглядит:
const NewsElement = (props) =>{

  const [display, setDisplay] = useState('none');

  const openBigScreen = () =>{
      document.body.style.overflow = 'hidden';
      setDisplay('flex')
    }

  return(
    <React.Fragment>
      <NewsBigScreen display={display}/>
      <div className='newsElement' onClick={openBigScreen}>
        <h2>{props.name}</h2>
        <img src={logo} />
        <p> {props.description}</p>
      </div>
    </React.Fragment>
  )
}


const NewsBigScreen = (props) =>{
  const [display, setDisplay] = useState('none')

  useEffect(()=>{
    setDisplay(props.display)
  })

  const closeBigScreen = () =>{
      setDisplay('none')
  }
  return(
    <div className='newsBigScreenWrap' style={{display: display}}>
      <div className='blackBackground'>
      </div>
      <div className='NewsBigScreen' >
        <input type='submit' onClick={closeBigScreen}/>
      </div>
    </div>
  )
}


Как передать пропс из одного элемента в другой и обратно?
Редакс не поможет, т.к. он поменяет стиль для всех элементов, а мне нужно только для одного

(newsBigScreen)
5d5fbb9c3d29d389810570.jpeg
(newsElement)(открывается по нажатию на один из блоков)
5d5fbc010ac6e113422160.jpeg
  • Вопрос задан
  • 74 просмотра
Решения вопроса 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
Подход с display: none в React разработке использовать не принято.

Условный рендеринг
Подъем состояния
Ответ написан
Комментировать
pterodaktil
@pterodaktil
js developer
в NewsBigScreen абсолютно бесполезно display/setDisplay/useState
const NewsElement = (props) =>{
  ...
  return(
    ...
      <NewsBigScreen display={display} setDisplay={setDisplay} />
    ...
  )
}

const NewsBigScreen = ({ display, setDisplay }) =>{
  const closeBigScreen = () =>{
      setDisplay('none')
  }

  return(
    <div className='newsBigScreenWrap' style={{display: display}}>
      <div className='blackBackground'>
      </div>
      <div className='NewsBigScreen' >
        <input type='submit' onClick={closeBigScreen}/>
      </div>
    </div>
  )
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы