Условный рендеринг Preact / typeScript «ожидается выражение»

Question

Здравствуйте, все, что я хочу сделать, - это простой условный рендеринг, который я делал ранее, но мне кажется, что я не могу сделать это в preact.

 export const InfoSection = (props: Props) => 
    {
        return (
            <div>
                <table>
                    <tr>
                        <th>#</th>
                        <th>User</th>
                        <th>Info</th>
                        <th>date</th>
                    </tr>
                    {
                        props.infoEntries.map( (l, i) => 
                        {
                            return (
                                <tr>
                                    <td>{i+1}</td>
                                    <td{l.UserId}</td>
                                    <td>{l.Info}</td>
                                    <td>{l.Date}</td>
                                </tr>
                            )
                        })
                    }
                    {
                        if(this.props.showEntryDetails){
                            return(
                        <tr>
                          <td>"Hello"</td>
                        </tr>
                    )
                        }
                    }
                </table>
            </div>
        )
    }

, как вы видите внизу, я просто пытаюсьиспользуйте if в showEntryDetails, но здесь я получаю сообщение об ошибке «Выражение ожидается», я думаю, что это ошибка машинописи, но я не знаю, почему она не дает мне if.Кто-нибудь, кто может объяснить мне, почему и если есть способ сделать то, что я хочу?

Answer 1

В JavaScript (а значит и в TypeScript) есть выражения и операторы.Вы можете использовать выражения как операторы, но не наоборот.

if - это оператор, но фигурные скобки JSX ожидают только выражения.Правильный способ сделать условный рендеринг - использовать &&:

{this.props.showEntryDetails && (
    <tr>
        <td>"Hello"</td>
    </tr>
)}