React & styled component

最新推荐文章于 2024-08-04 22:01:55 发布

weixin_30325971

最新推荐文章于 2024-08-04 22:01:55 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xgqfrms/p/10043199.html

本文介绍了如何使用React结合styled-components进行样式开发，通过tagged template literals实现动态样式生成。示例代码展示了如何根据变量构建样式字符串，适用于前端开发人员学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React & styled component

https://www.styled-components.com/#your-first-styled-component

tagged template literals

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates

https://www.styled-components.com/docs/advanced#tagged-template-literals


let person = 'Mike';
let age = 28;

const myTag = (strings, personExp, ageExp) => {
    let str0 = strings[0]; // "That "
    let str1 = strings[1]; // " is a "
    // There is technically a string after
    // the final expression (in our example),
    // but it is empty (""), so disregard.
    // var str2 = strings[2];
    let ageStr;
    if (ageExp > 99) {
        ageStr = 'centenarian';
    } else {
        ageStr = 'youngster';
    }

    // We can even return a string built using a template literal
    return `${str0}${personExp}${str1}${ageStr}`;
}

let output = myTag`That ${person} is a ${age}`;

console.log(output);
// That Mike is a youngster

转载于:https://www.cnblogs.com/xgqfrms/p/10043199.html