Stylat-componentの文字列を含むConcat prop値

Question

styled-componentで渡された小道具に 's'文字列を追加しようとすると問題が発生しました。また、スタイリッシュなコンポーネントでちょうどprop.xを使用できるかどうかは完全にはわかりません。ここで私の意味は次のとおりです。

const MyComponent = (props) => { 
 
    const StyledLineItem = styled.li` 
 
    animation: ${someAnime}; 
 
    animation-delay: ${props.x}; // <- will this work? 
 
// here i need to add the 's' to the end 
 
// but i can't use `` becaouse of the fact that styled components 
 
// are in a template tag already... at least i think that's why 
 
// i get errors when i try `${props.x}s` 
 
// also, i haven't tested but will using ${prop.x} in a styled-component 
 
// like this even work? 
 
    ` 
 
    return (
 
    <StyledLineItem>{props.text}</StyledLineItem> 
 
) 
 
} 
 

 
// in my main component... 
 

 
// ... react component stuff 
 
    render() { 
 
    return (
 
     <ul> 
 
     {_.map(data, (item, i) => <MyComponent key={i} text={item.text})} 
 
     </ul> 
 
    ) 
 
    }

私は何かに明確にすることができた場合、私に教えてください。

Answer 1

変数の後に "s"を追加すると正常に動作します。

`animation-delay: ${props.x}s`

000言葉

var x = .3; 
 
var a = `animation-delay: ${x}s`; 
 
var b = "animation-delay: "+x+"s"; 
 
console.log(a===b) //true

Answer 2

はい、あなたは `テンプレートタグ内とはいあなたはあなたのスタイルを生成するための小道具を使用することができます`使用することができます価値があるコードあなたのコードで、値を補間するために関数を使って、あなたの書式化されたコンポーネント：

const MyComponent = (props) => { 
    const StyledLineItem = styled.li` 
    animation: ${someAnime}; 
    animation-delay: ${props => `${props.x}s` : '0'}; 
    ` 
    return (
    <StyledLineItem>{props.text}</StyledLineItem> 
) 
} 

// in my main component... 

// ... react component stuff 
    render() { 
    return (
     <ul> 
     {_.map(data, (item, i) => <MyComponent key={i} text={item.text})} 
     </ul> 
    ) 
    } 

さらに詳しい情報：

https://www.styled-components.com/docs/basics#adapting-based-on-props