组件化思路：以selection为例子，使用prop-types实现组件化控制，重用

cgspine 发布于2019-08-01 18:01 / 2354人阅读

摘要：如何只开发一个组件就满足这个无理要求呢第一只老虎显示内容我们的是这样的具体实现，通过的倒是能很简单实现。怎么做呢，这就要引入一个包，叫了，定义属于这个组件的变量，然后将其运用到组件的每个的上。接下来以上述为例子。

需求

书接上文，UI 积累之select section

这里又来两个需求了。

当我点击选择了option后，我应该看到的是我选择的option的内容

多例重用，即同样是个selection，我只是需要改点东西，其他不变，比如selection里面的字内容，font-size, font-family, selection的width, height等。。。如何只开发一个组件就满足这个“无理要求”呢？

第一只老虎--显示option内容

我们的dom是这样的：


    
    Please select one option...

具体实现，通过react的state倒是能很简单实现。

给select绑定个onChange事件，触发onSelect方法，当选择select的option的时候，把选到的值传给真正显示的span

问题来了：1）怎么拿。 2）怎么给

1）怎么拿：

点击的时候，通过event.target.value拿到选中的option的值

2）怎么给：

在组件渲染的时候，constructor里的state定义一个值存放选中的值，叫showValue，当选择时，在onSelect方法里，拿到event.target.value后，set给这个值，同时dom中的span进行this.state.showValue值绑定。

Talk is cheap, show me the code

完整代码如下：

class Selection extends Component {
    constructor(props){
        super(props)
        this.state = {
            showValue: "Please select one option..."
        }
    }

    onSelect(e){
        this.setState({showValue: e.target.value});
    }
    render() {
        return (
            
                
                {this.state.showValue}
                
            
        );
    }
}

实例图：

第二只老虎--组件化

看上面的代码可以知道，引入这个selection的方式是这样的

render(
    
)

但是你这个selection啊，我同一个页面要引入N个，其中一个高度要是40px，另一个宽度要长点，500px，还有一个长宽都不用变，你给我变下这个selection的default的字啊，不叫Please select one option...，叫什么Please kindly select one option...，还有一个，你给我保持原样不变哈，谢谢了。

WTF，怎么做呢？

需求啊，莫得办法

为了开发方便，我自己设计，要是能组件化，几个属性在引入的时候可以选择性定义就好了，比如：

能这么实现就完美了。

怎么做呢，这就要引入一个包，叫prop-types了，定义属于这个组件的变量，然后将其运用到组件的每个dom的css上。
接下来以上述为例子。

定义属于这个组件的类型：

Selection.propTypes = {
    height: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),
    width: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),
    words: PropTypes.string
}

Selection.defaultProps = {
    height: "30px",
    width: "300px",
    words: "Please select one option..."
}

然后就是通过react的this.props引入啦

Talk is cheap, show me the code

index.js

class App extends Component {
  render() {
    return (
        
          
          
          
          
        
    );
  }
}

Selection.js

class Selection extends Component {
    constructor(props){
        super(props)
        this.state = {
            showValue: this.props.words
        }
    }

    onSelect(e){
        this.setState({showValue: e.target.value});
        console.log(e.target.value)
    }
    render() {
        const { width, height } = this.props

        const style = {
            width: width,
            height: height            
        }

        const suitableHeight = (parseInt(height.substring(0, height.length-2)) - 30) / 2 + 6;
        
        const spanStyle = {
            width: width,
            height: height,
            paddingTop:suitableHeight
        }

        const arrowStyle = {
            top:suitableHeight
        }

        return (
            
                
                {this.state.showValue}
                
            
        );
    }
}

Selection.propTypes = {
    height: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),
    width: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.string,
    ]),
    words: PropTypes.string
}

Selection.defaultProps = {
    height: "30px",
    width: "300px",
    words: "Please select one option..."
}

效果图：

hm。。。应该差不多了，这里代码里就忽略了

自定义属性时候纯数字和字符串的判断

当height是比30小的时候的判断处理

有兴趣自己加

ok，完美收工

GPU云服务器云服务器 vuejs组件使用在php中使用组件 asp使用第三方组件组件化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51526.html

组件化思路：以selection为例子，使用prop-types实现组件化控制，重用

摘要：如何只开发一个组件就满足这个无理要求呢第一只老虎显示内容我们的是这样的具体实现，通过的倒是能很简单实现。怎么做呢，这就要引入一个包，叫了，定义属于这个组件的变量，然后将其运用到组件的每个的上。接下来以上述为例子。需求书接上文，UI 积累之select section 这里又来两个需求了。当我点击选择了option后，我应该看到的是我选择的option的内容多例重用，即同样是个...

you_De 2019-08-21 17:38 评论0 收藏0
组件化思路：以selection为例子，使用prop-types实现组件化控制，重用

摘要：如何只开发一个组件就满足这个无理要求呢第一只老虎显示内容我们的是这样的具体实现，通过的倒是能很简单实现。怎么做呢，这就要引入一个包，叫了，定义属于这个组件的变量，然后将其运用到组件的每个的上。接下来以上述为例子。需求书接上文，UI 积累之select section 这里又来两个需求了。当我点击选择了option后，我应该看到的是我选择的option的内容多例重用，即同样是个...

edagarli 2019-08-29 13:49 评论0 收藏0
React中的Context怎么用

摘要：怎样使用假设有个如下的结构上面的例子中，我们把手动的方式传给了，这期间穿越了，而对本身没有什么用。不建议使用绝大多数的应用程序是不需要使用的。如果项目对数据管理较为复杂，推荐使用类似于或这样的状态管理库，而不要使用。 What is Context 今天在学习styled-components的Theming时，关于styled-components对主题的实现与管理上提到，主要应用到...

zhouzhou 2019-08-21 16:48 评论0 收藏0
React中组件通信的几种方式

摘要：首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信父组件向子组件通信数据流动是单向的父组件向子组件通信也是最常见的父组件通过向子组件传递需要的信息子组件向父组件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

yeooo 2019-08-21 18:00 评论0 收藏0
写 React 组件的最佳实践

摘要：本文介绍了，我们团队写组件的最佳实践。这样可以避免类似之类的错误避免使用函数表达式的方式来定义组件，如下这看起来非常酷，但是在这里，通过函数表达式定义的函数却是匿名函数。匿名函数也可能会导致测试库出问题。本文为译文，已获得原作者允许，原文地址：http://scottdomes.com/blog/ou... 当我第一次开始写 React 时，我发现多少个 React 教程，就有多少种...

lakeside 2019-08-20 18:55 评论0 收藏0