Компонент не скрывается с CSS (React. JS)

Question

Итак, для приложения я решил показать уравнение (для приложения) и обновить значения в реальном времени для каждого значения (с кнопкой для отображения / скрытия уравнения по желанию). Поэтому для этого у меня не только есть компонент уравнения в основном компоненте приложения (App. js), я также решил поместить компонент уравнения в тот же файл, что и мой компонент значений (value. js), в чтобы получить доступ к значениям и передать их в качестве реквизита компоненту уравнения. Я решил, что могу скрыть компонент уравнения в компоненте значения, поэтому отображается только компонент уравнения в основном компоненте приложения, и поэтому я могу одновременно получить доступ к реквизитам, поэтому я ввел что-то вроде этого:

<Equation 
className="hide"
FLoad={this.state.FLoad}
DLoad={this.state.DLoad}
DLowerBack={this.state.DLowerBack}
FTorso={this.state.FTorso}
DTorso={this.state.DTorso}
FLowerBack={this.state.FLowerBack}/> 

, а класс «hide» выглядит примерно так:

.hide {
  display: none;
}

Однако, когда я запускаю свое приложение, оба отображаются одновременно, и два уравнения перекрывают друг друга. Это почему? Почему уравнение в компоненте значений не скрывается даже с правильными тегами CSS? Я надеюсь, что кто-нибудь может мне помочь. Заранее спасибо.

EDIT: вот еще код для большего контекста

render() {
        return(
            <div className="Equation">Force of Lower Back () = (-1 x (Force Load  x ( Distance Load / Distance Lower Back)) + (-1 x Force Torso x (Distance Torso / Distance Lower Back))
            <div>Upward Force From Legs () = Force Load + Force Torso + Force Lower Back</div></div>

        );
    }
}

^ Код в компоненте уравнения

EDIT # 2:

{equation ? <div>
        <Equation/> 
        <button className="EquationButton" onClick = {() => equationVisibility(!equation)}>Hide Equation</button>
      </div> :
      <button className="EquationButton" onClick = {() => equationVisibility(!equation)}>Show Equation</button>}
      <Input />
    </div>

^ Вот и код в основном компоненте приложения. (Компонент Input является компонентом значений, о котором я говорил ранее)

Answer 1

Если я правильно понял, className="hide" не работает на вашем Equation компоненте. Это может быть из-за того, что Equation не использует его для внутренних целей. Вы должны получить className в Equation и применить его вручную к внутреннему компоненту, который необходимо скрыть.

const Equation = ({ className }) => (
  <div className={className} />
)

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

const Equation = ({ hide }) => {
  if (hide) {
    return null
  }

  return <div>{...}</div>
}

Итак, вы можете использовать его следующим образом:

<Equation 
  hide
  // other props
/> 

EDIT:

На основе нового фрагмента кода, который вы показали, вы можете сделать это:

render() {
    return(
      <div className={`Equation ${this.props.className}`}> // <--- add this
        Force of Lower Back () = (-1 x (Force Load  x ( Distance Load / Distance Lower Back)) + (-1 x Force Torso x (Distance Torso / Distance Lower Back))
        <div>
          Upward Force From Legs () = Force Load + Force Torso + Force Lower Back
        </div>
      </div>
    );
  }

Answer 2

Когда вы используете подобный настраиваемый компонент, вам необходимо передать соответствующие свойства. Возможно, вам следует добавить к компоненту опору className, а затем добавить следующую строку:

<element className={className} />

Вы можете использовать оператор распространения ..., чтобы добавить все свойства:

const Equation = ({...props}) => {
    return (
        <element {...props} />
    )
}