<div id="react">
            </div>

            <script type="text/babel">

                (function () {
                  'use strict';

                  var _msg = React.createClass({
                    getInitialState: function (){
                      return {show: true};
                    },
                    _click: function (){
                      var dom = this.refs.msgP;
                      var show;
                      if(this.state.show == true){
                        show = false;
                      }else{
                        show = true;
                      }
                      this.setState({
                        show: show
                      });
                      console.log(dom);
                    },
                    render: function() {
                      var style={fontSize:16};
                      var show = this.state.show ? 'show' : 'hide';
                      var className = 'asdf '+this.props.name;
                      return <p ref="msgP" style={{fontSize:16}} data-aa="sadkf" htmlFor={this.props.name} className={'asdf '+this.props.name+' '+this.props.class} onClick={this._click}>( p -> {this.props.name} -> {show} )</p>;
                    }
                  });

                  var data = ['name','name1','name2'];

                  function _click(){
                    console.log('_click');
                  }

                  ReactDOM.render(
                    <div>
                      <_msg name="msgnnn" opactiy=".6" class='p01 p02'/>
                      {
                        data.map(key => {
                          return <span onClick={_click}>{key}</span>
                        })
                      }
                    </div>,
                    document.getElementById('react')
                  );

                }());

            </script>