时间戳

首页 > 解决方案 > 反应解析失败，意外的令牌

reactjs - 反应解析失败，意外的令牌

问题描述

我正在尝试创建一个基于后端生成新行的 Dynamic Material UI Flex 框。我的想法是关闭当前的外框并根据标志创建一个新的

所以我写了下面的代码

    <Box p="1em">
      <Box display="flex">
        {tabs.map((t, index) => {
          return (
            <>

              <Box flex={resourcesTabs[index][0] == null ? 1 : resourcesTabs[index][0]['width_class']} ml="1em">

                <Typography variant="h6" gutterBottom>{t}</Typography>

                {resourcesFields[index] && resourcesFields[index].map((f, index) =>
                  generateInputField(f, index)
                )}
              </Box>

              {resourcesTabs[index][0]['new_line_after'] && </Box><Box display="flex">}

            </>

          );


        })}

      </Box>
    </Box>

但我收到以下错误

Parsing error: Unexpected token

因为它抱怨关闭此行的打开标签动态

          {resourcesTabs[index][0]['new_line_after'] && (</Box><Box display="flex">}

知道如何解决这个问题吗？

标签： reactjsmaterial-ui

解决方案

我通过用网格替换框来修复它，如下代码

     <div style={{ padding: 10 }}>

      <Grid container spacing={3}>
        {tabs.map((t, index) => {

          return (
            <>
              <Grid item xs={resourcesTabs[index][0] == null ? 6 : resourcesTabs[index][0]['width_class']} >

                <Typography variant="h6" gutterBottom>{t}</Typography>

                {resourcesFields[index] && resourcesFields[index].map((f, index) =>
                  generateInputField(f, index)
                )}
              </Grid>


            </>

          );


        }

        )}

      </Grid>
      </div>

推荐阅读