Блог

Я хочу отображать некоторую часть Html, только если одна из переменных имеет значение true. Я видел примеры, когда я могу вернуть весь элемент, но мне нужно только условие if для одной части html. Я хочу показать только 10 строк, если одна из переменных имеет значение true, но html с 500 строками является обычным. Могу ли я сделать это в функции return?

 
const getCustomers= (props) => {
useEffect(() =>{ do something...});

 return (
<>
if(test === true){
<div> 10 lines</div>
else
{
do not show this div
}
}

<div> 500 lines</div> // Common
</>

)
};
  

Условный рендеринг поддерживается только с использованием троичного оператора и логического оператора and:

 {
  something ? '10 lines' : '500 lines'
}

{
  something amp;amp; '10 lines' || '500 lines'
}
  

if-else инструкции не работают внутри JSX. Это связано с тем, что JSX — это просто синтаксический сахар для вызовов функций и построения объектов.

Для получения более подробной информации вы можете прочитать это и документы

Старайтесь избегать логики внутри ваших операторов return.

Вы можете присвоить свой условный вывод значению JSX и всегда отображать его.

 const Customers = () => {

  const optionalDiv = test === true amp;amp; <div>10 lines</div>;

  return (
    <>
      {optionalDiv}
      <div>500 lines</div>
    </>
  );
};
  

вы можете использовать условный (троичный) оператор

 return (
 <>
  { test === true ? (<div> 10 lines</div>) : null }
  <div> 500 lines</div>
 </>

)
  

Я думаю, что просто делать это так, как это должно получиться —

 return (
    <>
        {test? <div> 10 lines</div> : null}
        <div> 500 lines which are common</div> 
    </>
);