//父组件

class CommentList extends Component{

   render(){

return(

<div>

<Comment comment = {information} />

</div>

)

}

}

//子组件

class Comment extends Component{

render(){

return(

<div>

<p>{this.props.comment}</p>

</div>

)

}

}

//父组件

export default class Home extends Component {

  constructor(props){

    super()

    this.state={

      data:"请选择你喜欢的课程"

    }

  }

  aa=(item)=>{

    this.setState({

      data:item

    })

  }

  render() {

    console.log(this.state.data)

    return (

      <div>

        <div>

          <input type="text" placeholder={this.state.data} /></div>

          <Item  a={this.aa} />

      </div>

    )

  }

}

//子组件

export default class Item extends Component {

  constructor(props){

    super()

    this.state={

      data:[],

      state:false

    }

  }

  render() {

    // console.log(this.props)

    return (

      <div style={{display:this.state.state?"none":"block"}}>

        {

          this.state.data.map((val,index)=>{

            return <div key={index} className="d1" onClick={()=>{

              this.setState({

                data:this.state.data,

                state:!this.state.state

              })

              this.props.a(val.title)

            }}>{val.title}</div>

          })

        }

      </div>

    )

  }

  // 发送请求

  componentDidMount(){

    axios.get("http://localhost:3000/data.json").then((response)=>{

      console.log(response.data.data)

     this.setState({

       data:response.data.data

     })

    }).catch((error)=>{

      console.log(error)

    })

  }

}

//json文件  data.json

{

  "data": [

    {

      "id": "0",

      "title": "Vue.js"

    },

    {

      "id": "1",

      "title": "AngularJS"

    },

    {

      "id": "2",

      "title": "JavaScript"

    },

    {

      "id": "3",

      "title": "React.js"

    }

  ]

}