如何在条件为真和数组映射的情况下渲染jsx?

someuser2491

我想渲染某些条件为真的JSX并通过数组进行映射。

下面是代码,

{this.props.variables &&
     this.props.variable.map((variable, index) => {
         let element;
         if (variable.anchor) {
             element = document.querySelector(variable.anchor);
         }
         this.box_ref.current && element && (// error here
             <Childcomponent
                 element1={this.box_ref.current}
                 anchor={variable.anchor}
              />)
          }
      }
  )
}

出现错误,表明表达式不是赋值或调用。我该如何解决?谢谢。

丹尼斯瓦什

您需要为#Array.mapcallback提供一个返回值

另外,您应该为数组中的React元素提供唯一的键:

<>
  {this.props.variables &&
    this.props.variable.map((variable, index) => {
      let element;
      if (variable.anchor) {
        element = document.querySelector(variable.anchor);
      }
//       v Add return statement
      return (
        this.box_ref.current &&
        element && (
          <Childcomponent
            key={index}
            element1={this.box_ref.current}
            anchor={variable.anchor}
          />
        )
      );
    })}
</>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在没有要映射的对象数组的情况下循环和渲染React.js中的元素?

如何在不使用反射的情况下查看对象是否为数组?

如何在不循环遍历整个数组的情况下找到匹配条件的前n个数组项

如何在不知道键/值类型的情况下测试接口{}是否为映射?

如何在没有JSX的情况下渲染多个子级

如何在不重复字母的情况下检查正则表达式为真?

如何在不渲染的情况下清除堆积图

域如何在多维情况下将索引映射到目标语言环境数组

如何在不接收无效字符错误的情况下汇总字符和数值

如何在没有括号的情况下返回数组

如何在不单击每次按钮的情况下将迭代器重置为0的情况下遍历数组?

在React中,如何在不映射整个对象的情况下获取数据并在状态数组中呈现单个对象?

jsx中的条件和数组映射

如何在不循环的情况下使用现有数组值中的动态键映射新数组?

熊猫在条件为真和假的情况下更改值

我如何在不卸载的情况下渲染组件数组?

如何在不使用表格的情况下显示标题和数据的两行?

如何在条件为WHERE的情况下对表中的行进行计数?

如何在不排序的情况下从对象输出数组

如何在不显示为新数组的情况下向php数组添加元素

如何在设置条件$_POST为空且有价值的情况下选择数据

如何在不确定对象中的所有字段是否存在的情况下映射对象数组?

如何在不实际渲染我的网页的情况下渲染 404?

如何在不爆炸的情况下映射 Spark 数组?

如何在没有条件渲染的情况下省略字符串?

如何在不覆盖值的情况下映射列表

如何在不使用 JSX 的情况下编写 ReactJS 函数组件?

如何在不更新先前渲染的情况下渲染 onClick 事件的不同数据?

如何在不复制元素的情况下交换数组