您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

11.2 分成小组件(数据列表传递给子组件渲染)

发布时间：2025-03-01 23:02:28编辑：雪饮阅读（）

上篇中我们主要了解了react脚手架，那么接下来基于上篇中的App.js进行组件拆分。
为了方便起见，这里拆分的组件都写在App.js的同目录下。
首先看看App.js拆分后的代码如：
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import AddButton from './AddButton';
import QuestionList from './QuestionList';
import QuestionForm from './QuestionForm';
function App() {
    const [QuestionListData]=React.useState([
        {
            title:'产品经理与程序员矛盾的本质是什么？',
            description:'理性探讨，请勿撕逼。产品经理的主要工作职责是产品设计。接受来自其它部门的需求，经过设计后交付研发。但这里有好些职责不清楚的地方。',
            voteCount:22
        },
        {
            title:'热爱编程是一种怎样的体验？',
            description:'别人对玩游戏感兴趣，我对写代码、看技术文章感兴趣；把泡github、stackoverflow、v2ex、reddit、csdn当做是兴趣爱好；遇到重复的工作，总想着能不能通过程序实现自动化；喝酒的时候把写代码当下酒菜，边喝边想敲；不给工资我也会来加班；做梦都在写代码。',
            voteCount:22
        }
    ]);
  return (
        <div>
                <div className="jumbotron text-center">
                    <div className="container">
                        <h1>React问答</h1>
                        <AddButton/>
                    </div>
                </div>
                <div className="main container">
                    <QuestionForm/>
                    <QuestionList items={QuestionListData}/>
                </div>
            </div>
  );
}

export default App;
然后第一个拆分的AddBotton.js组件如：
function AddButton() {
    return (
        <button id="add-question-btn" className="btn btn-success">添加问题</button>
    );
}
export default AddButton;
然后第二个拆分的是QuestionForm.js组件如：
function QuestionForm(){
    return (
        <form name="addQuestion" className="clearfix">
            <div className="form-group">
                <label htmlFor="qtitle">问题</label>
                <input type="text" className="form-control" id="qtitle" placeholder="您的问题的标题"/>
            </div>
            <textarea className="form-control" rows="3" placeholder="问题的描述"></textarea>
            <button className="btn btn-success pull-right">确认</button>
            <button className="btn btn-default pull-right">取消</button>
        </form>
    );
}
export default QuestionForm;
然后接下来拆分的是QuestionList.js组件如：
import QuestionItem from './QuestionItem';
function QuestionList({items}){
    console.log("items",items);
    return (
        <div id="questions" className="">
            {items.map((item, index) => (
                <QuestionItem key={index} item={item}/>
            ))}
        </div>
    );
}
export default QuestionList;
然后接下来是每个问题列表项QuestionItem.js组件如：
function QuestionItem({item}){
    return (
        <div className="media">
            <div className="media-left">
                <button className="btn btn-default">
                    <span className="glyphicon glyphicon-chevron-up"></span>
                    <span className="vote-count">{item.voteCount}</span>
                </button>
                <button className="btn btn-default">
                    <span className="glyphicon glyphicon-chevron-down"></span>
                </button>
            </div>
            <div className="media-body">
                <h4 className="media-heading">{item.title}</h4>
                <p>{item.description}</p>
            </div>
        </div>
    );
}
export default QuestionItem;
很清晰明了了属于是，主要是列表数据渲染以及父子组件传值都挺清晰的了。