Question

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

所以我写了以下代码

    <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">}

有什么解决办法吗？

Answer 1

有一个偷偷摸摸的括号：

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

Answer 2

我通过用以下代码替换带有网格的框来修复它

     <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>

反应解析失败，令牌异常

2 个答案: