[React Fundamentals] Composable Components
React Components Fundamentals
2023-09-14 09:00:53 时间
To make more composable React components, you can define common APIs for similar component types.
import React from 'react'; import ReactDOM from 'react-dom'; export default class App extends React.Component{ constructor(){ super(); this.state = { red: 0, green: 0, } } update(){ this.setState({ red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value, green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value, }) } render(){ return( <div> <NumInput ref="red" type="range" min={0} max={255} step={1} val={+this.state.red} label="Red" update={this.update.bind(this)} ></NumInput> <NumInput ref="green" type="number" step={0.01} val={+this.state.green} label="Green" update={this.update.bind(this)} ></NumInput> </div> ); } } class NumInput extends React.Component{ constructor(){ super(); } render() { const label = this.props.label ? <label>{this.props.label} - {this.props.val}</label> : ''; return ( <div> <input type={this.props.type} min={this.props.min} max={this.props.max} step={this.props.step} defaultValue={this.props.val} onChange={this.props.update} ref="inp" /> {label} </div> ); } } NumInput.propTypes = { type: React.PropTypes.oneOf(['range', 'number']), min: React.PropTypes.number, max: React.PropTypes.number, step: React.PropTypes.number, val: React.PropTypes.number, label: React.PropTypes.string, update: React.PropTypes.func.isRequired, }; NumInput.defaultProps = { type: 'range', min: 0, max: 255, step: 1, val: 0, label: '' };
相关文章
- 08-React路由6.3.0(高亮, 嵌套, 参数传递... )
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- React:不要动,否则你会被炒鱿鱼
- react的jsx和React.createElement是什么关系?面试常问
- angularjs子组件向父组件传值_react子组件传值
- React源码分析5-commit
- 一天梳理完react面试高频题
- React源码分析(一)Fiber
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- react面试题合集
- react源码分析--组件的创建和更新
- 常见react面试题
- 打造安全的 React 应用,可以从这几点入手
- 字节前端必会react面试题1
- React源码分析5-commit6
- react源码分析:深度理解React.Context_2023-02-07
- React的useLayoutEffect和useEffect执行时机有什么不同_2023-02-23
- 问:你是如何进行react状态管理方案选择的?_2023-03-13
- React Context源码是怎么实现的呢_2023-03-15
- 手写一个react,看透react运行机制_2023-02-13
- React Native在render渲染界面时控件的onPress中方法就被自动执行详解编程语言
- React 许可证虽严苛,但不必过度 react
- 5 分钟搞懂面试官必问 React 题