Question

我正在将React与Ant Design一起使用，但这只是一个React问题。

我有这样的代码：

  {
    title: "Group",
    dataIndex: "group",
    key: "group",
    render: text => (
     <a> {text} </a>
    )
  }

不是render: text => ()，它允许我在js函数（或jsx？）中使用html

但是，如果我尝试使用if / else逻辑，则总是会出错。

现在我正在使用像这样的愚蠢的东西：

render: texts => (
  <span>
     {[""].map(text => {
      if(texts.includes(":")) {
       return (<b> {texts} </b>)
      }
    return (<a> {texts} </a>)
  })}
</span>

问题是，有没有一种方法可以不使用[""].map()呢？如果不行，为什么不简单

Answer 1

您不能在JSX内使用if/else，但可以在返回一些JSX之前在JSX内使用三元表达式或在函数内使用if/else条件。这是两个示例：

    {

      render: texts => (
        <span>
          { 
            texts.includes(":")
              ? <b> {texts} </b>
              : <a> {texts} </a>
          }
        </span>
      ),

      otherRender: texts => {
        if (texts.includes(":")) {
          return (
            <span><b> {texts} </b></span>
          )
        }
        return (
          <span><a> {texts} </a></span>
        )
      }

    }

Answer 2

为什么不可能：

JS中的Expressions versus statements之间存在区别：

一个表达式产生一个值...一个语句执行一个动作。
{}语法允许Embedding Expressions in JSX，但不允许嵌入语句
if是一个声明

等效表达式，使用conditional operator代替if：

render: texts => (
  <span>
     {texts.includes(":")
       ? <b>{texts}</b>
       : <a>{texts}</a>
     }
  </span>
)

无法在反应渲染方法中使用if / else

2 个答案: