Question

我正在尝试在React中使用样式化组件来对有序列表进行样式化。

我有以下代码

const Sublist = styled.ol`
   counter-reset: secondItem;
   margin: 10px 0 0 25px;

   li:before {
       content: ${props => props.isDeg ? counter(secondItem) `° ` : `§ ` counter(secondItem)};
       counter-increment: secondItem;
   }
`

我在第二个计数器Parsing error: Unexpected token, expected "}"收到一条错误消息

如何包装两个条件，以使计数器被识别？

Answer 1

这里有两点：

counter是一个CSS函数，您不能在js函数中使用它
content值必须在引号内

因此请更改行

content: ${props => props.isDeg ? counter(secondItem) `° ` : `§ ` counter(secondItem)};

到

content: '${props => !props.isDeg && "§ "}' counter(secondItem) '${props => props.isDeg && "° "}';

Answer 2

counter（secondItem）是一个函数调用，它返回一个值，然后您需要将其与°相加？那你可能想试试




var counter = (secondItem) => {
   return secondItem === 1 ? 'abc' : 'edf';
}
var backtickData = `${1 === 1 ? `${counter(1)} ° ` : `§ ${counter(1)}`}`;
console.log(backtickData)




const Sublist = styled.ol`
   counter-reset: secondItem;
   margin: 10px 0 0 25px;

   li:before {
       content: ${props => props.isDeg ? `${counter(secondItem)}° ` : `§ ${counter(secondItem)}`};
       counter-increment: secondItem;
   }
`

让我知道这是否适合您：）

带计数器的列表内容的条件式组件

2 个答案: