添加显示以有条件地反应组件？

Question

I am trying to hide the components conditionally

method 1: to add style = display: none to div

is there a way to dynamically add display to div via state?

since all the components are in Div, how to isolate each rendered component and add display none?

is there a way to add the state that can trigger css / add css to certain react component?

import React, { Component } from 'react';
import all the component A, B AND C

class App extends Component {
   constructor(props) {
     super(props);
    this.state = {};
  }
  

  render() {
    return (
      <div>
               <Component A/>
               <Component B/>
              <Component C/>

      </div>
    );
  }
}

export default App;

Answer 1

This seems like partly a duplicate of this question .

You can set your values of a class dynamically like this:

renter() { 
  return (
    <div className={is_displayed ? "showItClassName" : "dontShowItClassName"} > 
      ...
    </div>
  );

This is probably the better way because you can re-use your css classes. You can create variables ahead of time with the class name or call a function if you don't want the conditional in the middle of the html tag.

If your sure you want to use an style tag you need the extra curly braces.

render() {
  return (
    <div style={is_displayed ? {display:"block"}: {display:"none"}} >
           <Component A/>
           <Component B/>
          <Component C/>

    </div>
  );

Answer 2

Per Choosing the Type at Runtime :

import { ComponentA } from './ComponentA';

<div>
  {(() => {
    // capitalized variable first
    let Component = <p>Error!</p>;
    if (/google/.test(this.state.url)) {
      Component = ComponentA
    }
    return <Component />
  })()}
</div>

Answer 3

You can render the component conditionally instead of tto use css to make this:

{true_condition && ( <Component /> )}