Question

我试图有条件地在我的页面上呈现少量消息。以下是我实际场景的简化代码。

{
  "delimiter": "\t",
  "sourceFileHost": "10.87.88.123",
  "sourceFilePort": "50070",
  "sourceFileLoc": "/nandha/U_Fin_Group.tab",
  "header": false,
  "keyspace": "jofi",
  "connectiontype": "HDFS",
  "filename": "U_Fin_Group.tab",
  "tablename": "fin_group",
  "tablequery": [
    "CREATE KEYSPACE IF NOT EXISTS jofi WITH REPLICATION = { 'class' : 'org.apache.cassandra.locator.SimpleStrategy', 'replication_factor': '1' } AND DURABLE_WRITES = true;",
    "CREATE TABLE IF NOT EXISTS jofi.fin_group(acc_no text,branch text,fin_id text,PRIMARY KEY (fin_id))"
  ],
  "metadataquery": [
    "CREATE TABLE IF NOT EXISTS jofi.metadatatable(colname text,tablename text,checkcondition text,coltype text,filename text,isnull text,maxval text,minval text,sourcecol int,PRIMARY KEY (colname, tablename,filename))",
    "INSERT INTO jofi.metadatatable(colname, tablename, checkcondition, coltype, filename, isnull, maxval, minval, sourcecol)VALUES(?,?,?,?,?,?,?,?,?)",
    [
      "fin_id",
      "fin_group",
      "",
      "text",
      "U_Fin_Group.tab",
      "",
      "",
      "",
      "0"
    ],
    "INSERT INTO jofi.metadatatable(colname, tablename, checkcondition, coltype, filename, isnull, maxval, minval, sourcecol)VALUES(?,?,?,?,?,?,?,?,?)",
    [
      "acc_no",
      "fin_group",
      "",
      "text",
      "U_Fin_Group.tab",
      "",
      "",
      "",
      "2"
    ],
    "INSERT INTO jofi.metadatatable(colname, tablename, checkcondition, coltype, filename, isnull, maxval, minval, sourcecol)VALUES(?,?,?,?,?,?,?,?,?)",
    [
      "branch",
      "fin_group",
      "",
      "text",
      "U_Fin_Group.tab",
      "",
      "",
      "",
      "1"
    ]
  ]
}

我想从上面提取常见的东西并在代码中使用它。

<div>
    {
        isCondition1 == true ?
           'Show issue list'
        :
            isConditionA == true?
               'Show message for condition A'
            :
                'Show error message'
    }
</div>
<div>
    {
        isCondition2 == true?
           'Show team issue list'
        :
            isConditionA == true?
               'Show message for condition A'
            :
               'Show error message'
    }
</div>

使用如下：

const msgNoIssues = (
    isConditionA == true?
       'Show message for condition A'
    :
       'Show error message'
);

但是它给出了一条错误信息：

对象无效作为React子对象（找到：带键的对象） {msgNoIssues}）。如果您要渲染一组孩子，请使用替代数组或使用createFragment（object）包装对象 React附加组件。

没有反应附件可以实现吗？有没有更好的方法呢？

Answer 1

JSX中何时需要{}？

我们需要使用{}将js表达式放在JSX中，因此将三元运算符放在{}内。

此错误的原因：对象无效作为React子级

{ msgNoIssues }的含义是{ msgNoIssues: msgNoIssues }，这意味着您正在尝试使用键msgNoIssues呈现对象，这就是它抛出错误的原因：对象无效为一个React子节点（找到：具有键{msgNoIssues}的对象）。

<强>解决方案：

删除{}周围的msgNoIssues，将其写为：

<div>
    {
        isCondition1 == true ?
            'Show issue list'
        :
            msgNoIssues
    }
</div>
<div>
    {
        isCondition2 == true ?
            'Show team issue list'
        :
            msgNoIssues
    }
</div>

检查此代码段（{ a }的意思）：

＆＃13;

let a = 10;

let obj = {a};

console.log('obj = ', obj);

＆＃13;

检查DOC：Embedding Expressions in JSX和Conditional Rendering

使用三元运算符进行条件渲染

1 个答案: