数组映射中的条件渲染 React Bootstrap 列

Question

在我的 react 应用程序中，我将一个数组映射到渲染函数的 JSX 中的引导列。在我的数组对象中有一个名为“taken”的属性，如果这是真的，那么我想映射不同的列而不是如果它是假的。

我尝试调用一个方法来渲染输出，设置一个变量并直接在 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 错误，我不确定这是否是 react-bootstrap 的限制。

我设法通过为每列工作多次编写条件语句来达到预期的结果。不知道为什么我之前没有想到。

            { 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

如果我没记错的话。应该是这样的。假设您在女巫中有一个对象数组，其中一个字段被认为是 take 。

例如。 tests = [{taken:true,...rest},...rest object]

在你的 react 应用中，你必须像这样渲染它

    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
     )}

这是我根据您提供的信息添加的。如果你有任何双重让我知道。