react props常用场景

1.  通过props传递一个组件

2. this.props.children

3. props传递方法

4. props传递数据

react/first-react/src/App.js
 
import Home from './views/home';
import Test from './views/Test';
import Props from './views/Props';
 
function App() {
  return (
    <div>
        <h3>这是第一个app</h3>
        {/*
            <Home/>
            <Test/>
            <PropsBak/>
        */}
        <Props/>
    </div>
  );
}
export default App;
————————————————
版权声明：本文为CSDN博主「c三只布朗熊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46347206/article/details/118659637

react/first-react/src/views/Props/index.jsx
 
import React, { Component } from 'react';
 
import One from './one.jsx';
import Two from './two.jsx';
import Three from './three.jsx';
import Four from './four.jsx';
import Five from './five.jsx';
import Five2 from './five2.jsx';
 
class View extends Component {
    render(){
        const obj = {
            name:'元芳',
            age:32
        }
        const obj2 = {
            cls:'web1908',
            zy:'web'
        }
        return(
            <div className="props_main">
                <h3>props的使用场景有哪些</h3>
                <One title="全国名师推荐"/>
                <One title="热门名师"/>
                <One title="名师热度榜"/>
                <Two data={obj} {...obj2}/>
                <Three title="全国名师推荐">
                    <a href="true"><<更多</a>
                </Three>
                <Three/>
                <Four left={<Five/>}/>
                <Four left={<Five2/>}/>
            </div>
        )
    }
}
export default View;
————————————————
版权声明：本文为CSDN博主「c三只布朗熊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46347206/article/details/118659637

 

react/first-react/src/views/Props/one.jsx
 
import React, { Component } from 'react';
 
class View extends Component {
 
    render(){
        console.log(this.props)
        return(
            <div>
                <h4>第一种使用场景</h4>
                {this.props.title}
            </div>
        )
    }
}
export default View;

————————————————
版权声明：本文为CSDN博主「c三只布朗熊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46347206/article/details/118659637

react/first-react/src/views/Props/two.jsx
import React, { Component } from 'react';
 
class View extends Component {
 
    render(){
        console.log(this.props)
        const {name ,age } = this.props.data;
        const {data,cls,zy} = this.props;
        return(
            <div>
                <h4>第一种使用场景</h4>
                名字是：{this.props.data.name}<br/>
                {name}<br/>
                {data.age}<br/>
                {cls}<br/>
                {zy}<br/>
            </div>
        )
    }
}
export default View;

react/first-react/src/views/Props/three.jsx
import React, { Component } from 'react';
 
class View extends Component {
 
    render(){
        return(
            <div>
                <h4>第二种使用场景</h4>
                {this.props.children}
            </div>
        )
    }
}
export default View;

react/first-react/src/views/Props/four.jsx
import React, { Component } from 'react';
 
class View extends Component {
 
    render(){
        console.log(this.props)
        return(
            <div>
                <h4>第三种使用场景</h4>
                {this.props.left}
            </div>
        )
    }
}
export default View;

react/first-react/src/views/Props/five.jsx
import React, { Component } from 'react';
 
class View extends Component {
 
    render(){
        return(
            <div className="props_five">
                <h4>第一个左侧</h4>
            </div>
        )
    }
}
export default View;

react/first-react/src/views/Props/five2.jsx
import React, { Component } from 'react';
 
class View extends Component {
 
    render(){
        return(
            <div className="props_five">
                <h4>第二个左侧</h4>
            </div>
        )
    }
}
export default View;

react/first-react/src/styles/index.scss
@charset "UTF-8";
// 默认样式
@import "base.scss";
// props
@import "props.scss";
// Test
// @import "test.scss";
//Header
// @import "header.scss";

react/first-react/src/styles/props.scss
@charset "UTF-8";
.props_main{
    width:500px;
    margin:0 auto;
    h3 {
        font-size:16px;
        line-height: 24px;
    }
}
.props_five {
    width:100px;
    border:1px solid red;
    height:100px;
}