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

时间:2019-03-02 11:14:47

标签: css reactjs styled-components

我正在尝试在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 "}"收到一条错误消息

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

2 个答案:

答案 0 :(得分:2)

这里有两点:

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

因此请更改行

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

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

答案 1 :(得分:0)

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; } `

让我知道这是否适合您:)