组件的组合使用

组件的组合使用

步骤：
1)拆分组件: 拆分界面,抽取组件
2)实现静态组件: 使用组件实现静态页面效果
3)实现动态组件
①　动态显示初始化数据
②　交互功能(从绑定事件监听开始)

问题：数据保存在哪个组件内？
看数据是某个组件需要（给它），还是某些组件需要（给共同的父组件）
问题：子组件需要改变父组件的状态？
子组件不能直接改变父组件的状态，状态在哪个组件，更新状态的行为就在哪个组件

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
     /*
    1)拆分组件: 拆分界面,抽取组件
    2)实现静态组件: 使用组件实现静态页面效果
    3)实现动态组件
        ① 动态显示初始化数据
        ② 交互功能(从绑定事件监听开始)
     */
     class App extends React.Component{
         constructor(props){
            super(props)
            this.state={
                todos:['吃饭', '睡觉', '打豆豆']
            }
            this.add = this.add.bind(this)
         }
         render(){
             const {todos} = this.state
             return (
                 <div>
                    <TodoAdd add={this.add} count={todos.length} ></TodoAdd>  
                    <TodoList todos={todos}></TodoList> 
                 </div>
             )
         }

         add(todo){
            const {todos} = this.state
            todos.unshift(todo)
            this.setState({todos})
         }
     }
     class TodoAdd extends React.Component{
        constructor(props){
            super(props)
            this.addTodo = this.addTodo.bind(this);
         }

         addTodo(){
            const value = this.todoInput.value.trim()
            if(!value){
                return
            }
            //保存
            this.props.add(value)
            //清除输入
            this.todoInput.value=''
         }

         render(){
             return (
                <div>
                <h2>Simple TODO List</h2>
                <input type="text" ref={input=>this.todoInput=input}/>
                <button onClick={this.addTodo}>Add #{this.props.count + 1}</button>
            </div>
             )
         }
     }

     TodoAdd.propTypes = {
      //add: PropTypes.func.isRequired,
      count: PropTypes.number.isRequired
    }
     
     class TodoList extends React.Component{
         
         render(){
             const {todos} = this.props
             return (
                 <ul>
                    {
                        todos.map((todo, index) => <li key={index}>{todo}</li>)
                    }
                 </ul>
             )
         }
     }

    
     TodoList.propTypes = {
      todos: PropTypes.array.isRequired
    }


    

     //渲染应用组件标签
     ReactDOM.render(<App/>,document.getElementById('example'))

</script>
</body>
</html>

 

posted @ 2020-03-19 15:26  技术小白丁  阅读(400)  评论(0)    收藏  举报