美文网首页
可选择的DOM元素的React按钮组件

可选择的DOM元素的React按钮组件

作者: MakingChoice | 来源:发表于2016-05-31 11:16 被阅读753次

昨晚想了一个可选择的DOM元素的React按钮组件,组件内置了两个DOM元素,除了内置的DOM元素,还可以在<code>Render()</code>渲染的时候,添加可选项来自定义Dom元素。<p>
直接上code

import React from 'react';
import ReactDOM from 'react-dom';
const Button=React.createClass({
//设置props验证方式
    propsTypes:{
          component:React.PropTypes.node,
          classn:React.PropTypes.string,
          active:React.PropTypes.bool,
          href:React.PropTypes.string,
          disabled:React.PropTypes.bool,
          target:React.PropTypes.string
    },
//props默认属性
   getDefaultProps(){
        return{
            active:true,
            disabled:true
        }
    },
//初始化状态
   getInitialState(){

   },
//默认<a></a>的渲染
   renderADom(classname){
       let{
             href,
             component:Component,
             children,
             props 
        }=this.props;
        Component=Component||'a';//默认a标签
        href=href||'#'
        return <Component {...props}  href={href} className={classname}>
                  {children}
          </Component>
   },
//默认<button></button>的渲染
   renderButtonDom(classname){
      let{
          href,
          component:Component,
          children,
          props
      }=this.props;
      Component=Component||'button';
      return <Component {...props} className={classname}>
              {children}
      </Component>
   },
  render(){
      let{
        href,
        active,
        target,
        classn
      }=this.props;
      let renderType=href || target?'renderADom':'renderButtonDom';//默认渲染button标签
      return this[renderType](classn)
  }
})
export default Button

index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './components/Button';
//下面这个是渲染a标签,className是success类名
ReactDOM.render(<Button classn={"success"} target={"a"}/>,document.getElementById('app'))
//下面这个是默认渲染button标签,className是fail类名
ReactDOM.render(<Button classn={"fail"} />,document.getElementById('app'))
//下面这个是渲染a标签,className是fail类名 链接设置href
ReactDOM.render(<Button classn={"fail"}  target={'a'} href={http://'www.baidu.com'} />,document.getElementById('app'))
//下面这个渲染是自定义的span标签
ReactDOM.render(<Button classn={"fail"}  component={'span'}/>,document.getElementById('app'))

相关文章

  • 可选择的DOM元素的React按钮组件

    昨晚想了一个可选择的DOM元素的React按钮组件,组件内置了两个DOM元素,除了内置的DOM元素,还可以在 Re...

  • 8-生命周期

    React 组件的生命周期 React.js 将组件渲染,并且构造 DOM 元素然后塞入页面的过程称为组件的挂载。...

  • react: React.forwardRef

    关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。 一、React...

  • React中ref的使用

    React中Ref是什么? ref是React提供的用来操纵React组件实例或者DOM元素的接口。 ref的作用...

  • 学习并实现react (3)

    复用组件 React 组件书写规则 组件可以直接渲染组件组件渲染多个children 时需要用 dom 元素进行包...

  • React Native常用组件----View

    一、 JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素。React利用...

  • React native 常用组件之View

    一、 JSX和组件的概念React的核心机制就是虚拟DOM,可以在内存中创建的虚拟DOM元素,React利用虚拟D...

  • React Native常用组件之View

    一、 JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素。React利用...

  • React Native实战系列第四篇 — View组件

    一、 JSX和组件的概念 React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素。React利用...

  • 初识react.js

    安装 react包是核心, 提供创建元素, 组件等功能。 react-dom包提供DOM相关功能。 坑点: 小伙伴...

网友评论

      本文标题:可选择的DOM元素的React按钮组件

      本文链接:https://www.haomeiwen.com/subject/znpcdttx.html