我的第一個React自定義組件

今天隨便翻了一下antd的組件庫，看到下面這樣的組件，當時我就震驚了：

這尼瑪，這是出於什么樣的考慮，一個列表還要用戶編寫子項的渲染方式。

所以，我就自己寫了一個

List.js：

List.less：

index.js：

效果：

當然，可以根據需要添加更多的事件以及對其他數據格式的支持。

 

自個兒寫了個Input輸入框組件：

X_UI.js:

import React, { Component } from 'react';
import './X_UI.less';


/*輸入框*/
export class Input extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value:props.value,
        }
    }
    /*雙向數據綁定更新父組件*/
    onchange = (e)=>{
        var value = e.target.value;
        this.setState({
            value:value
        });
        if(this.props.onChange){
            this.props.onChange(value);
        }
    }
    /*雙向數據綁定更新子組件*/
    componentWillReceiveProps = (nextProps) => {
      this.setState({
        value:nextProps.value,
      })    
    }
    render() {
        console.log(this.props.size);
        var style;
        switch (this.props.size){
            case 'large':
                style={
                    height:'36px',
                    inlineHeight:'36px',
                    fontSize:'18px'
                }
                break;
            case 'small':
                style={
                    height:'24px',
                    inlineHeight:'24px',
                    fontSize:'12px'
                }
                break;
            default:
                style={
                    height:'30px',
                    inlineHeight:'30px',
                    fontSize:'15px'
                }
                break;
        }
        //與props.style屬性合並
        style = Object.assign(this.props.style||{},style)
        var placeholder = this.props.placeholder||'請輸入...';
        return (
            <div className="x_input">
                <input placeholder={placeholder} style={style} onChange={this.onchange} value={this.state.value}></input>
            </div>
            );
    }
}

X_UI.less:

@gray:rgb(197,197,197);
@blue:rgb(51,153,255);

input::-webkit-input-placeholder{
  color:@gray !important;
}
input::-moz-placeholder{
  color:@gray !important;
}
input:-ms-input-placeholder {
  color:@gray !important;
}   

.x_input{
    >input{
      border:1px solid @gray;
      padding:2px 6px;
      border-radius:4px;
    }
    >input:hover{
        border:1px solid @blue;
    }
    >input:focus{
        border:1px solid transparent;
        box-shadow:0 0 3px 1px @blue;
        outline:none
    }
}

App.js:

import React, { Component } from 'react';
import {Input} from '../../components/X_UI'
import './App.less';

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value:'hello'
    };
  }
  change=(value)=>{
    this.setState({
      value:value
    })
  }
  render() {
    return (
      <div className="app"> 
        <Input size="small" value={this.state.value} onChange={this.change} />
        {this.state.value}
        <button onClick={this.change.bind(this,'world')}>Click</button>
      </div>
    );
  }
}

效果：