React 语法错误 - 解析错误：意外的标记，

Question

 const Sidebar = () => ( <Stack direction="row" sx={{ overflowY: "auto", height: { sx: 'auto', md:'95%' }, flexDirection: { md: 'column' }, }} > {categories.map((category) => ( <button className="category-btn" style={{ background: category.name === selectedCategory && '#FC1503', color: 'white' }} key={category.name} > <span style = {{ color: category.name === selectedCategory? 'white': 'red', marginRight: '15px'}}> {category.icon}</span> <span style = {{ opacity: category.name === selectedCategory? '1': '0.8'}}>{category.name}</span> </button> ))}

最后我得到了 Line 19:4: Parsing error: Unexpected token (19:4)

似乎无法理解最后一行的括号有什么问题，刚开始使用 React 并检查了这一点，重写和编辑了无数次无济于事。

Answer 1

您需要将您的组件包装在可以是 div 或片段的单个父元素中，还需要关闭标签，如 or

const Sidebar = () => (      
      <div>
        <Stack
          direction="row"
          sx={{
            overflowY: "auto",
            height: { sx: "auto", md: "95%" },
            flexDirection: { md: "column" }
          }}
        />
        {categories.map((category) => (
          <button
            className="category-btn"
            style={{
              background: category.name === selectedCategory && "#FC1503",
              color: "white"
            }}
            key={category.name}
          >
            <span
              style={{
                color: category.name === selectedCategory ? "white" : "red",
                marginRight: "15px"
              }}
            >
              {category.icon}
            </span>
            <span
              style={{ opacity: category.name === selectedCategory ? "1" : "0.8" }}
            >
              {category.name}
            </span>
          </button>
        ))}
      </div>
    );

Answer 2

你忘了正确关闭你的。 2 种可能性： <Stack>content</Stack>或<Stack />