react父组件向子组件传值问题

[it_leaner]

import React from 'react'
class Parent extends React.Component{
  constructor(props){
    super(props)
    this.state={
      text:'content'
    }
  }
  render(){
    return <div>
      <h3>fu</h3>
      <input type="button" value="in_theaters" onClick={()=>{this.change('in_theaters')}}/>
      <input type="button" value="coming_soon" onClick={()=>{this.change('coming_soon')}}/>
      <input type="button" value="top250" onClick={()=>{this.change('top250')}}/>
      <hr/>
      <Son></Son>
    </div>
  }
  change=(str)=>{
    this.setState({
      text:str
    })
  }
}
class Son extends React.Component{
    render(){
      return <div>
        <h2>zi</h2>
        <p>当前的电影类型：{this.props.text}</p>
      </div>
    }
  }
export default Parent;

[li905663280]

<Son text={this.state.text}></Son>