react踩坑不完全指北(2)

1.img引入图片路径

本地图片
方法一：

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

方法二：

import search from '../img/search.png'import user from '../img/user.png'<img src={search} alt="" /><img src={user} alt="" />

背景图片引用方法

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 (    <div className={'FancyBorder FancyBorder-' + props.color}>      {props.children}    </div>  );}

允许其他组件通过嵌套 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实现父组件调用子组件方法

<script type="text/babel">    ///子组件    var HelloMessage = React.createClass({        childMethod: function(){            alert("组件之间通信成功");        },        render: function() {            return <div> <h1>Hello {this.props.name}</h1>  <button onClick={this.childMethod}>子组件</button></div>        }    });    //父组件    var ImDaddyComponent = React.createClass({        getDS: function(){            //调用组件进行通信            this.refs.getSwordButton.childMethod();        },        render: function(){            return (                    <div>                        <HelloMessage name="John" ref="getSwordButton" />                        <button onClick={this.getDS}>父组件</button>                    </div>            );        }    });    ReactDOM.render(            <ImDaddyComponent  />,            document.getElementById('correspond')    );</script>

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 (            <div>                请输入邮箱：<input ref="emailDom" onChange={this.handleVal}/>            </div>        )    }});//父组件，通过handleEmail接受到的参数，即子组件的值var Parent = React.createClass({    getInitialState: function(){        return {            email: ''        }    },    handleEmail: function(val){        this.setState({email: val});    },    render: function(){        return (            <div>                <div>用户邮箱：{this.state.email}</div>                <Child name="email" handleEmail={this.handleEmail.bind(this)}/>            </div>        )    }});React.render(  <Parent />,  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)            })        }    }