Условный рендеринг React Bootstrap столбцы в карте массива

Question

В моем приложении реакции я сопоставляю массив с начальной загрузкой столбцов в JSX функции рендеринга. В моем объекте массива есть атрибут с именем «берется», и если это правда, то я хочу отобразить другие столбцы, чем если бы это было ложно.

Я попытался вызвать метод для рендеринга вывода, установить переменную и выполнить рендеринг непосредственно в JSX. Я пробовал разные перестановки ${test.datesubmitted}.

            { test.taken
              ? <Col>Taken</Col><Col>`${test.datesubmitted}`</Col>
              : <Col><button id={test.id} className="likelink" onClick={this.handleClickInvite}>Invite</button></Col>
            }
            <Col><button id={test.id} className="likelink" onClick={this.handleTakeTest}>Take Test</button></Col>

Answer 1

Литералы с тегами шаблона - это JS, поэтому его нужно заключить в фигурные скобки. Попробуйте это:

<Col>{`${test.datesubmitted}`}</Col>

Или, так как вы непосредственно отображаете строковое значение без каких-либо конкататов, лучшим вариантом будет:

<Col>{test.datesubmitted}</Col>

Answer 2

Я попробовал ответы выше, но продолжал получать ошибки JSX, я не уверен, является ли это ограничением с реакцией-начальной загрузкой.

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

            { test.taken ? <Col>taken</Col> : null }
            { test.taken ? <Col>{test.datesubmitted}</Col> : null }
            { test.taken ? <Col>{test.result}</Col> : null }
            { test.taken ? <Col>{test.score} out of {test.outof}</Col> : null }
            { !test.taken ?  <Col><button id={test.id} className="likelink" onClick={this.handleTakeTest}>Take Test</button></Col> : null}

Возможно, есть лучшие способы сделать это, но на данный момент это нормально.

Answer 3

Если я не ошибаюсь. Так и должно быть. Допустим, у вас есть массив объектов в ведьме, есть одно поле, известное как занятое.

Отл. tests = [{taken:true,...rest},...rest object]

в вашем приложении для реагирования вы должны отобразить его следующим образом

    const TestTaken = () => {
return test.map((test) =>
    test.taken ?
    < > < Col > Taken < /Col><Col>`${test.datesubmitted}`</Col > < /> :
    < Col > < button id = {
        test.id
    }
    className = "likelink"
    onClick = {
        this.handleClickInvite
    } > Invite < /button></Col >

)

}

и в вашей функции рендеринга вы можете выполнить рендеринг следующим образом:

    render(){

     return(
       <TestTaken/>
       ...rest your code
     )}

Это то, что я добавил на основании предоставленной вами информации. Если у вас есть двойной, дайте мне знать.