React—封装组件传递参数

1、app.js

ReactDom.render(
    <div>
        <Nav></Nav>
        <Pic title="标题aaa" cont="内容bbb"></Pic>
    </div>,
    document.getElementById('root')
)

2、Pic.js // 组件 注意起名规范，如果是关键字会报错

第一种写法：

export default class Pic extends Component {
    render () {
        return (
            <div className="pic">
                <img className="img" src={require('images/1.jpg')} alt=""/>
                <h3>{this.props.title}</h3>
                <p>{this.props.cont}</p>
            </div>
        )
    }
}

第二种写法：

export default class Pic extends Component {
    render () {
        let {title, cont} = this.props;
        return (
            <div className="pic">
                <img className="img" src={require('images/1.jpg')} alt=""/>
                <h3>{title}</h3>
                <p>{cont}</p>
            </div>
        )
    }
}