10-11 组件组合使用_初始化显示/交互
Posted zhanzhuang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10-11 组件组合使用_初始化显示/交互相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>05_components_composing</title> </head> <body> <div id="example"></div> <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> <script type="text/babel"> /* 1)拆分组件: 拆分界面,抽取组件 2)实现静态组件: 使用组件实现静态页面效果 3)实现动态组件 ① 动态显示初始化数据 ② 交互功能(从绑定事件监听开始) */ /* * 问题：数据保存在哪个组件中？ * 看数据是某个组件需要(给他)，还是某些组件需要(给共同的父组件) * 问题2：需要在子组件中改变父组件的状态 * 状态在哪个组件，更新状态的行为就应该定义在哪个组件 * 解决：父组件定义函数，传递给子组件，子组件调用 * */ // 应用组件 class App extends React.Component { constructor(props) { super(props) // 初始化状态 this.state = { todos: [‘吃饭‘, ‘睡觉‘, ‘打豆豆‘] } this.add = this.add.bind(this) } add(todo) { const {todos} = this.state todos.unshift(todo) //更新状态 this.setState({todos}) } render() { const {todos} = this.state return ( <div> <TodoAdd add={this.add} count={todos.length}/> <TodoList todos={todos}/> </div> ) } } // 添加todo组件 class TodoAdd extends React.Component { constructor(props) { super(props) this.addTodo = this.addTodo.bind(this) } addTodo() { // 读取输入数据 const text = this.input.value.trim() // 查检 if (!text) { return } // 保存到todos this.props.add(text) // 清除输入 this.input.value = ‘‘ } render() { return ( <div> <h2>Simple TODO List</h2> <input type="text" ref={input => this.input = input}/> <button onClick={this.addTodo}>Add #{this.props.count}</button> </div> ) } } TodoAdd.propTypes = { add: PropTypes.func.isRequired, count: PropTypes.number.isRequired } // todo列表组件 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>
以上是关于10-11 组件组合使用_初始化显示/交互的主要内容，如果未能解决你的问题，请参考以下文章