Как скрыть / показать содержимое компонента, который повторно используется различными представлениями в ReactJS - PullRequest
Новая
       14

Как скрыть / показать содержимое компонента, который повторно используется различными представлениями в ReactJS

0 голосов
/ 13 февраля 2019

У меня есть два представления, которые вызывают определенный компонент, и мне трудно скрывать / показывать, когда компонент необходим.Таким образом, у меня есть следующее:

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

Я пробовал:

Раздел компонентов: 

      <div className="section_news">
        {orden.map(this.renderSection)}
        <ViewAllNews mostrarCategorias={false} categoriaId={newsId} />

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

Далее я оставлю оригинальный фрагмент кода:

Представление с именем «Домой»: 

<div className="contentbar">
      <Section title="Ult. News" />
      <Section
        notices_id={19}
        orden={[[0, 3], [3, 1], [4, 2]]}
      />
    </div>

** Вид с именем «Новости»: **

   <Section
        notices_id={data.post.category.id}
        orden={[[0, 2], [2, 3]]}
      />

Раздел компонентов: 

      <div className="section_news">
        <Titles title={title || (category && category.title)} />
        {orden.map(this.renderSection)}
        <ViewAllNews categoriaId={newsId} />

Компонент ViewAllNews: 

  return (
    <Link to={`/news/c/${categoryId}/`}>
      <div className="parentLineViewAll">
        <div className="LineViewAll" />
        <div className="line" />
        <div className="Views">View All</div>
        <div className="arrowMore">
          <FontAwesomeIcon icon="chevron-circle-right" />
        </div>
      </div>
    </Link>
  );
};

Как вы можете видеть, представление "Home" и "Views" использует то же самоеcomponent.

Что мне действительно нужно, так это скрыть компонент с именем для представления "News" , а также скрыть компонент "ViewAllNews" только для просмотра новостей.

Спасибоза вашу помощь!

Ответы [ 2 ]

0 голосов
/ 13 февраля 2019

способ реализации componentWillUnmount() и componentWillMount(), например в этом примере , надеюсь, вам в этом поможет.

0 голосов
/ 13 февраля 2019

Самый простой способ скрыть / показать реагирующие компоненты - это использовать условный рендеринг

Вот базовый пример: 

class MyComponent Extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      isVisible: false, // <-- add a value to state so we can track the components visibility
    }
  }

  show = () => {
    this.setState({ isVisible: false })
  }

  hide = () => {
    this.setState({ isVisible: true })
  }

  render(){
    if(this.state.isVisible){
      return (
       /* your component code */
      )
    }
  }
}

Если вы хотите переключитькомпонента из родительского компонента, тогда вы можете управлять этим с помощью ref : 

class Parent Extends React.Component {
  constructor(props){
    this.myRef = React.createRef()
  }

  render(){
    return <MyComponent ref={this.myRef}>
  }
}

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

if(this.myRef.current){
  this.myRef.current.show() // or .hide()
}

Вы также можете контролировать видимость компонентов с помощью реквизита: 

function MyComponent({ isVisible }){
  if(isVisible){
    return (
      /* your component code */
    )
  }
}

Надеюсь, это поможет, дайте мне знать, если у вас есть какие-либо вопросы!

...