react踩坑不完全指北(2)

1.img引入图片路径

本地图片
方法一：

require('../img/icon1.png')} alt="" />

方法二：

import search from '../img/search.png'
import user from '../img/user.png'

"" />
"" />

背景图片引用方法

const divStyle = {
  color: 'red',
  backgroundImage: 'url(' + imgUrl + ')',
  // 或者 background: `url${require("1.jpg")}`
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!div>;
}

变量图片地址

<img src={item.img} />

2.React组件属性部类（propTypes）校验

1、JavaScript基础数据类型，包括数组、布尔、函数、数字、对象、字符串

optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

2.如果不能为空isRequired

React.PropTypes.array.isRequired

…别的跟上面一样的使用
3.指定数据类型成数组

React.PropTypes.arrayOf(React.PropTypes.number)

4.指定数据类型到对象

React.PropTypes.objectOf(React.PropTypes.number)

使用方式:
组件名称.propTypes = {
key1:验证器,
}

实例：

class NvHead extends Component {
    constrctor() {
        super();
    }
}
NvHead.propTypes = {
  data: React.PropTypes.array.isRequired
}

NvHead.defaultProps = {
  data: [
    {
      value: '1',
      label: 'Food',
    }, {
      value: '2',
      label: 'Supermarket',
    },
    {
      value: '3',
      label: 'Extra',
      isLeaf: true,
    },
  ]
}

3.子组件中创建插槽二次插入节点

方式一：使用 children 属性将子元素直接传递到输出
子组件

function FancyBorder(props) {
  return (
    
{'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    
  );
}

允许其他组件通过嵌套 JSX 来传递子组件：

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      p>
    FancyBorder>
  );
}

方式二：多个入口 使用自己约定的属性而不是 children

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      div>
      <div className="SplitPane-right">
        {props.right}
      div>
    div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

4.通过ref实现父组件调用子组件方法

5.子组件传数据到父组件

步骤：
1.在工作中就直接由父组件向子组件传递（带参）函数
2.当需要在子组件里面进行值的变化传递给父组件的时候，把需要传递的值（json，数组都能传 等等）作为入参给函数。

//子组件，handleVal函数处理用户输入的字符，通过props调用父元素方法，然后再传给父组件的handelEmail函数
var Child = React.createClass({
    handleVal: function() {
        var val = this.refs.emailDom.value;
        val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
        this.props.handleEmail(val);
    },
    render: function(){
        return (
            

                请输入邮箱："emailDom" onChange={this.handleVal}/>
            
        )
    }
});
//父组件，通过handleEmail接受到的参数，即子组件的值
var Parent = React.createClass({
    getInitialState: function(){
        return {
            email: ''
        }
    },
    handleEmail: function(val){
        this.setState({email: val});
    },
    render: function(){
        return (
            

                
用户邮箱：{this.state.email}
                "email" handleEmail={this.handleEmail.bind(this)}/>
            
        )
    }
});
React.render(
  ,
  document.getElementById('test')
);

6.路由切割，组件懒加载 react-router3.0

仍然是依赖于webpack的bundle-loader

{
    path: 'city/:id',
    getComponent(nextState, cb) {
            require.ensure([], (require) => {
                cb(null, require('./views/city').default)
            })
        }
    }