React的props

props是父组件往子组件传东西

不改变的值使用props,而改变的值我们要使用state，基本用法如下：

class Happy extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <h1>I am {this.props.name}</h1>

    }
}

ReactDOM.render(
    <div>
       <Happy name='Ming'/>
    </div>,
    document.getElementById('app')
);

输出，I am Ming

this.props.children的用法

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss'

class Happy extends React.Component {
    render() {
        return <div>
            <p>I am Rose</p>
        </div>
    }
}
class Title extends React.Component {
    constructor(props){
        super(props)
    }
    render() {
        return <div>
            <h1>{this.props.children}</h1>
        </div>
    }
}

class App extends React.Component {
    render() {
        return(
            <div>
                <Title>
                    <span>Link</span>
                    <a href='#'>HaHa</a>
                </Title>
                <hr/>
                <Happy/>
            </div>
        )

    }
}

ReactDOM.render(
    <div>
        <App/>
    </div>,
    document.getElementById('app')
);

输出：

LinkHaHa

——

I am Rose