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