Как исправить "если утверждения" в "возвращаемой части" компонента класса в React Js?

Question

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

    render() {
        console.log(this.state.filterField);
        const filteredXpGreater = this.state.peoples.filter(person => {
            return person.randomXp > 3;
        })
        const filteredXpLess = this.state.peoples.filter(person => {
            return person.randomXp <= 3;
        })
        return (
            if (this.state.filterField.includes("Above 3 Years of Experience")) {
                <div className='App'>
                <Filter radioSelected1={this.onRadioSelected1} radioSelected2={this.onRadioSelected2} checkedMale={this.onCheckedMale} checkedFemale={this.onCheckedFemale} />
                <Cardlist data={filteredXpGreater} />
            </div>
            } else if (this.state.filterField.includes("Above 3 Years of Experience") {
                <div className='App'>
                <Filter radioSelected1={this.onRadioSelected1} radioSelected2={this.onRadioSelected2} checkedMale={this.onCheckedMale} checkedFemale={this.onCheckedFemale} />
                <Cardlist data={filteredXpLess} />
            </div>
            } else {
                <div className='App'>
                <Filter radioSelected1={this.onRadioSelected1} radioSelected2={this.onRadioSelected2} checkedMale={this.onCheckedMale} checkedFemale={this.onCheckedFemale} />
                <Cardlist data={this.state.peoples} />
            }
        )
    }
}

Answer 1

Это просто JavaScript, а в JavaScript оператор if не является выражением, поэтому вы не можете вернуть его значение.

Вы можете либо снять if с return:

        if (this.state.filterField.includes("Above 3 Years of Experience")) {
            return <div className='App'>
                <Filter radioSelected1={this.onRadioSelected1} radioSelected2={this.onRadioSelected2} checkedMale={this.onCheckedMale} checkedFemale={this.onCheckedFemale} />
                <Cardlist data={filteredXpGreater} />
            </div>
        } else if () {
            return <div className='App'>
                <Filter radioSelected1={this.onRadioSelected1} radioSelected2={this.onRadioSelected2} checkedMale={this.onCheckedMale} checkedFemale={this.onCheckedFemale} />
                <Cardlist data={this.state.peoples} />
            </div>
        }

(Вы, вероятно, имели в виду else вместо else if() здесь, но я оставил все как есть.)

Или используйте троичный условный оператор ... ? ... : ...:

    return (
        this.state.filterField.includes("Above 3 Years of Experience") ?
            <div className='App'>
                <Filter radioSelected1={this.onRadioSelected1} radioSelected2={this.onRadioSelected2} checkedMale={this.onCheckedMale} checkedFemale={this.onCheckedFemale} />
                <Cardlist data={filteredXpGreater} />
            </div>
            :
            <div className='App'>
                <Filter radioSelected1={this.onRadioSelected1} radioSelected2={this.onRadioSelected2} checkedMale={this.onCheckedMale} checkedFemale={this.onCheckedFemale} />
                <Cardlist data={this.state.peoples} />
            </div>
    )

Не уверен, если вам нужны какие-либо дополнительные скобки где-нибудь; мой JSX немного ржавый.

Answer 2

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

return (

 <>
   // ... some code 

   { condition ? trueOutput: falseOutput }

   { 
     this.state.filterField.includes("Above 3 Years of Experience")
       ? <> true case </>
       : <> false case </>
   }

   // ... some other code
 </>

)