Как скрыть компонент в react?

#reactjs

Вопрос:

У меня есть два компонента Компонент приложения и компонент 2

 import Component2 from './Component2';
  
class App extends Component {  
  
    state={data:""}
  
    changeState = () => {  
      this.setState({data:`state/props of parent component 
      is send by onClick event to another component`}); 
         }; 
  
    render(){   
        return (     
            <div className="App">  
                <Component2 data={this.state.data} />   
                <div className="main-cointainer">
                    <h2>Compnent1</h2> 
          <button  onClick={this.changeState} type="button"> 
             Send state 
          </button>    
                </div>
            </div>   
        );          
    }}
  
    export default App;

и в Component2.js

 const Component2 = (props) => {
    return (
        <div className="main-cointainer">
            <h2>Compnent2</h2> 
              
<p>{props.data} </p>
  
        </div>
    )
}
  
export default Component2;

Здесь я передаю данные из компонента приложения в компонент Component2 . Я хочу, чтобы
компонент 2 не отображался при передаче данных из компонента приложения в компонент Component2 .

Я пытался написать это заявление

 { false amp;amp; <Component2 data={this.state.data} /> }

но из этого ничего не вышло .

Есть какие-либо предложения по выполнению этого типа требований ?

1. почему вы начинаете условный рендеринг с ложного логического значения? Вы читали соответствующий раздел в документах? reactjs.org/docs/…

2. Вы хотите сказать, что не хотите показывать компонент 2, когда у вас есть некоторые данные в свойстве data?

3. @Dennis, потому что я не хочу отображать компонент 2 в своем приложении, это мое требование .

Ответ №1:

Чтобы скрыть компонент 2 (без изменения его функциональности), добавьте его в div с style = {{display: 'none'}}

App.js

 import React from "react";
import "./style.css";

import Component2 from "./Component2";

export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      <div style={{ display: "none" }}>
        <Component2 myProps="this is a example" />
      </div>
    </div>
  );
}

Проверьте демо-версию : https://stackblitz.com/edit/react-bbxgcr?file=src/App.js

PS : Откройте консоль, чтобы увидеть реквизиты, правильно переданные компоненту 2

1. Я допустил ошибку, это должно быть сделано для компонента 2 (см. Мой отредактированный ответ)

2. Я не хочу изменять функциональность компонента 2 .

3. @RajGopalbh4 Попробуй мое новое решение

4. Спасибо. ваше новое решение работает хорошо .

Ответ №2:

вы можете сделать это только с одним «если». Если я правильно понял проблему

 const Component2 = (props) => {
 if(props.data === ""){
 return(<div></div>)
}
    return (
        <div className="main-cointainer">
            <h2>Compnent2</h2> 
              
<p>{props.data} </p>
  
        </div>
    )
}
  
export default Component2;

Ответ №3:

Попробуйте использовать отрицание, чтобы просто преобразовать пустую строку в логическое значение.

  { !!this.stat.data amp;amp; <Component2 data={this.state.data} /> }

Если this.stat.data это пустая строка или ложное значение, то Component2 оно не будет отображаться

Или

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

 <Component2 data={this.state.data} hidden={true}/>

Компонент 2

 const Component2 =({ data, hidden }) => {
  return (
    <div hidden={hidden}>
      <h1>Component2</h1>
    </div>
  );
}

Добавление hidden атрибута в HTML-тег скроет элемент на странице.