Проблема в реакции с if / else

Question

Что мне не хватает, чтобы он работал? Я полагаю, ответ очень прост, но на самом деле я начинаю с React и до сих пор не знаю, почему это не работает. Если кто знает, я очень благодарен.

Спасибо.

    import React from 'react';

    var a=30;
    var b=20;

    function App() {
      return (
        <div>
        <h1>if or else</h1>
        <c/>
        </div>
      );
    }

    export default App;

    function c(a,b) {
      if (a >= b){ 
      return (
        <div> 
        <h2> A is greater than B</h2>
        </div>
        );
     }
      else {
         return (
          <div> 
           <h2>B is greater than A</h2>
          </div>
        );
     }
    }

Answer 1

Во-первых, компоненты реакции должны начинаться с заглавной буквы, иначе средство визуализации React будет рассматривать его как обычное HTML.

Измените объявление вашей функции на:

function C(a,b) {}

И измените свой JSX, в котором вы вызываете этот компонент, на:

<C/>

---

Во-вторых, компонент должен принимать один аргумент (реквизиты), но ваш компонент принимает два аргумента. И затем, когда вы вызываете компонент, вы в настоящее время не передаете никаких реквизитов.

Так что заставьте ваш компонент принимать реквизиты как один объект:

function C(props) {
  if (props.a >= props.b) {
    //...

где вы вызываете компонент:

<C a={a} b={b} />

Answer 2

Эй, тебе нужно сделать вот так

import React from 'react';

function App() {
  return (
    <div>
    <h1>if or else</h1>
    <C a={20} b={30}/>
    </div>
  );
}

export default App;

function C({a, b}) {
  if (a >= b){ 
  return (
    <div> 
    <h2> A is greater than B</h2>
    </div>
    );
 }
  else {
     return (
      <div> 
       <h2>B is greater than A</h2>
      </div>
    );
 }
}