月份：2018年1月

React JSX内部判断等写法

React JSX内部写判断语法，三元表达式不好写的可以这么写

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {
    （function(obj){
        if(obj.props.name)
          return obj.props.name
        else
          return "World"
      }(this))
    }</div>;
  }
});
ReactDOM.render(<HelloMessage name="xiaowang" />, document.body);
By react , 8 Comments

React 解析html内容

使用dangerouslySetInnerHTML={{__html: page}}解析html内容

render:function(){
    var page=this.state.data.show;
    console.log(page);
      return (
      <div>
            <ul>
            </ul>
          {page}
          <div dangerouslySetInnerHTML={{__html: page}} />
      </div>
);

 

By react , 7 Comments

react componentWillReceiveProps 接收传参问题

刚开始不知道这个方法有参数，所以造成很多不可预料的问题，经过查资料发现获取最新参数要使用方法的参数来接收

例如：

nextProps为传入的参数，this.props为之前传入的参数

componentWillReceiveProps(nextProps){
	if(nextProps.checked !==this.props.checked){
		this.setState({
			checked:nextProps.checked
		});
	}
}
By react ,

php随机生成MAC地址

php随机生成MAC地址代码，前三个为固定mac头，根据要用的更改

function mac_gen(){
	$array=array(
		0x1C,
		0x1C,
		0x1C,
		mt_rand(0x00, 0x7f),
		mt_rand(0x00, 0xff),
		mt_rand(0x00, 0xff)
	);
	return join(':',array_map(function($v){
		return sprintf("%02X",$v);
	},$array));
}
By php ,

React解决模态框子组件不自动更新问题

解决方案：每次点击打开模态框的时候为，当前模态框设置一个独立的key值，代码如下：

测试模态框加key，使用id获取出问题，要更改为给未更新子组件加key值

  /*
   * 上传文件的模块框控制
   * */
  showFileModal = () => {
    this.setState({
      fileVisible: true,
    });
    this.setState({myKey: Math.random()});

  };


//组件代码
 <Modal
          width={760}
          key = {this.state.myKey}
          title="上传文档"
          visible={this.state.fileVisible}
          onOk={this.handleOkFile}
          onCancel={this.handleCancelFile}
        >
          <div>
            <Row>
              <a href="xxxxxx.xlsx">
                <Button className=‘cq-btn‘>下载上传模板</Button>
              </a>
            </Row>
            <Dragger {...fileUploadProps}>
              <p className="ant-upload-drag-icon">
                <Icon type="inbox"/>
              </p>
              <p className="ant-upload-text">点击excel或将excel文件拖拽到此区域上传</p>
            </Dragger>

            <RadioGroup onChange={this.onChange} value={this.state.value}>
              <Radio value={0}>全量</Radio>
              <Radio value={1} >增量</Radio>
            </RadioGroup>
            {resultMessage}
          </div>

        </Modal>
By react ,