最近做了一个react的点击按钮显示与隐藏div的一个小组件：

 

【筛选】组件FilterButton

import React,{Component} from 'react';import {render} from 'react-dom';export default class FilterButton extends Component{  constructor(props){      super(props);      this.state = {         clickProps:{             display: 'none',  //控制display的值来隐藏与显示             name:'筛选'         }      }  }  //组件的props发生改变,在组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用。  componentWillReceiveProps(nextProps) {        if(nextProps.needConfirm) {             this.setState(                  {                     clickProps:{                            display: 'none',                            name:'筛选'                     }                 }             );         }    }/* *  'inline-block' == this.state.clickProps.display   条件：当前的state中display的值是否为 inline-block *   this.setState({clickProps:{display: 'none',name:'筛选'}})  值：  如果是，则隐藏div并在button上显示'筛选' *   this.setState({clickProps:{display: 'inline-block',name:'取消'}});  值：  如果不是，则显示div并在button上显示'取消'*/  changeDisplay() {    'inline-block' == this.state.clickProps.display ? this.setState({clickProps:{display: 'none',name:'筛选'}}) : this.setState({clickProps:{display: 'inline-block',name:'取消'}});  this.props.click(this.state.clickProps.display);  }//this.props.children为这个按钮的子组件  render(){     return(         
     
              
       {this.state.clickProps.name}              
      
                            {
     this.props.children}              
      
         
     
     );  }}

【调用】组件 FilterButton

import React,{Component} from 'react';import {render} from 'react-dom';import Input from 'react-bootstrap/lib/Input.js';import FilterButton from '../../../../public_component/button/FilterButton';export default class InspectionResults extends Component {  constructor(props){      super(props);  } render(){     //使用一个常量，调用FilterButton，并把它的子组件回传     const selectBtn = (         
                  
                       {department}                          
                       {productLine1}                          
                       确定                      
         );   return(     
     
      {selectBtn}
     
   ); }}

react.js 传子组件的另一个方法，也可以这样做：

const children = (                        {department}                                                    {productLine1}                                                    确定                );