React—封装组件传递参数

最新推荐文章于 2024-06-11 19:09:38 发布

Poppy_LYT

最新推荐文章于 2024-06-11 19:09:38 发布

阅读量879

点赞数

分类专栏： React 文章标签：传递参数

本文链接：https://blog.csdn.net/Poppy_LYT/article/details/100576664

版权

React 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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>
        )
    }
}