React-组件-TaggedTemplateLiterals

前言

React-组件-TaggedTemplateLiterals是一项强大的React技术，它结合了React组件和模板文字标记。这种方法允许您在编写React组件时更灵活地处理模板文字字符串。通常，React组件内的JSX用于渲染UI，但Tagged Template Literals使您能够在组件中定义带有占位符的模板文字，并通过标记函数处理它们。

这种方法的优势在于您可以将动态数据嵌入到模板文字中，同时保持React组件的可读性和可维护性。您可以使用Tagged Template Literals来构建更复杂的UI结构，使组件更具通用性。此技术也提供了更多的控制权，以处理样式，条件渲染等方面的逻辑。

总之，React-组件-TaggedTemplateLiterals是一种扩展React开发工具箱的方式，可以提高您的组件开发效率，并使您能够更轻松地处理动态内容和UI结构。

在 JS 中除了可以通过 () 来调用函数以外, 其实我们还可以通过 模板字符串 来调用函数:

const name = 'yangbuyiya';
const age = 18;

const test = (...args) => {
    console.log(args);
}

test`1, 2, 3`;

image-20220510133439120

通过模板字符串调用函数规律:

• 参数列表中的第一个参数是一个数组, 这个数组中保存了所有不是插入的值
• 参数列表的第二个参数开始, 保存的就是所有插入的值

const name = 'yangbuyiya';
const age = 18;

const test = (...args) => {
    console.log(args);
}

test`1, 2, 3, ${name}, ${age}`;

image-20220510133731846

总结结论

• 我们可以拿到模板字符串中所有的内容
• 我们可以拿到模板字符串中所有非插入的内容
• 我们可以拿到模板字符串中所有插入的内容
• 所以我们就可以对模板字符串中所有的内容进行单独的处理

输入图片说明

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

输入图片说明