初识ReactJS的组件化开发(二):组件嵌套和属性的基本使用

关注

原创最新推荐文章于 2025-12-30 16:55:38 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

前端 React.js 组件化开发实战本文旨在为前端开发者提供全面的React.js组件化开发指南，涵盖从基础概念到高级实践的全方位内容。React组件化思想的核心原理现代React开发的最佳实践大型应用的状态管理策略性能优化和调试技巧文章首先介绍React核心概念，然后深入组件设计模式，接着通过实战项目展示完整开发流程，最后探讨性能优化和未来趋势。虚拟DOM：React维护的内存中的DOM表示，用于高效更新真实DOMJSX：JavaScript语法扩展，允许在JavaScript中编写类似HTML的代码单向数据流。阅读详情

需求：我们要在导航里组件里嵌套一个搜索框组件，并设置样式

定义搜索框组件：

// 搜索框组件
var SearchText = React.createClass({
    render: function(){
        return <input type="text" placeholder="请输入关键字" className={this.props.cssClass}/>
    }
});

导航栏组件NavBar中如何嵌套？

<li><SearchText cssClass="search_text2" /></li>

关于样式

<style type="text/css">
        /*searchtext的样式*/
        .search_text{height: 25px;border-radius: 5px;}
        .search_text2{height: 25px;border-radius: 5px;background-color: beige}
    </style>

在SearchText如何使用css样式？
1. className=”search_text”
2. className={this.props.cssClass}，并且使用组件的时候cssClass=”search_text2”。其中cassClass是可以随便命名的。

最后我们的nav.js代码如下：


// 创建组件
var NavBar = React.createClass({
    liClick: function () {
        alert('组件');
    },
    render: function(){
        return <ul>
                <li><a href="">最新电影</a></li>
                <li><a href="" onClick={function(){alert('组件')}}>最新评论</a></li>
                <li><SearchText cssClass="search_text2" /></li>
            </ul>
    }
});

// 搜索框组件
var SearchText = React.createClass({
    render: function(){
        return <input type="text" placeholder="请输入关键字" className={this.props.cssClass}/>
    }
});

ReactDOM.render(
    // 使用组件
    <NavBar />,
    document.getElementById("navbar")
);

html代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>初始</title>
    <meta charset="utf-8">
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <style type="text/css">
        *{padding: 0;margin: 0}
        #navbar{position: fixed;width: 100%;height: 60px;background-color: #222;}
        #navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}
        #navbar li a{color: #fff;text-decoration: none;}
        /*searchtext的样式*/
        .search_text{height: 25px;border-radius: 5px;}
        .search_text2{height: 25px;border-radius: 5px;background-color: beige}
    </style>
</head>
<body>
    <div id="navbar"></div>
    <div id="container"></div>
    <div id="footer"></div>

    <script type="text/babel" src="src/nav.js"></script>
</body>
</html>