React 界面样式设计

最新推荐文章于 2024-08-16 00:42:49 发布

Minn0916

最新推荐文章于 2024-08-16 00:42:49 发布

阅读量2.9k

点赞数

分类专栏： react学习进阶笔记 react

本文链接：https://blog.csdn.net/Jane617_min/article/details/79573769

版权

本文探讨了在React框架下如何处理界面样式设计的问题。React提倡组件的高度可重用性，要求界面设计逻辑与功能逻辑整合。文章通过实例介绍了从CSS过渡到React样式设计的方法，包括使用`style`属性内联样式，以及如何实现组件样式的参数化，以提高灵活性。总结了React组件化设计对于复杂可重用组件的优势。

摘要由CSDN通过智能技术生成

当我们完成程序的基本功能后，不对程序界面进行打磨妆点，那么过于素颜的界面，对用户是产生不了吸引力的。对于网页应用而言，用来美化界面的技术，一直都是CSS,CSS是一种好技术，它能将界面的美化和程序的功能逻辑进行良好的分离。特别是它的选择子功能，能够让开发者针对某个具体控件进行美化。

然而在React 框架下，我们不好继续使用CSS来设计界面，这是由 React的设计思想所决定的。React的核新思想是，让每一个控件成为高度可重用的独立个体，这就要求控件的界面设计逻辑和它的功能逻辑必须整合到一起，

在原有逻辑下，控件的功能逻辑由js编写，控件的呈现界面由css负责，两者是分离的。那么React 是怎么把他们结合在一起，同时，又能保证逻辑上的耦合度尽量降低的呢。其实React 并不拒绝使用CSS来设计界面，先从我们熟悉的css开始，慢慢过渡到React 的界面设计方式上来。

首先在目录下新建一个空白文件叫style.html,然后我们先完成程序的基本框架代码

1，先使用css来设计界面元素

<!DOCTYPE  html>
<html>
    <head>
         <title>Styling in  React</title>
         <script src="react.js"></script>
         <script src="react-dom.js"></script>
         <script src="browser.min.js"></script>