Question

在我的react应用程序中，我正在将数组映射到render函数的JSX中的引导程序列。在我的数组对象中，有一个名为“ taken”的属性，如果为true，那么我想映射的列与如果为false的列不同。

我尝试调用一种方法来呈现输出，设置变量并直接在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

如果我没记错的话。应该是这样的。可以说您在女巫中有一系列物体，其中一个域称为“取”。

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

这是我根据您提供的信息添加的内容。如果您有任何双重身份，请通知我。

Answer 2

标记的模板文字是JS，因此必须用花括号将其包裹起来。试试这个：

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

或者您直接渲染字符串值而没有任何连接时，更好的选择是：

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

Answer 3

我尝试了上面的答案，但是一直收到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}

也许有更好的方法，但是目前看来还可以。

阵列图中的条件渲染React Bootstrap列

3 个答案: