34043


いろいろやっても動きませんでしたので、  
質問させてください。

JavaScriptには慣れていませんので、  
常識的な変なこと聞いていたら申し訳ないです。

こちらのサイトのReact.jsのサンプルを動かしました。

Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza開発日誌  
<http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9>

jsfiddle で掲載されていたものから、HTML全体を取得して  
ローカルに保存し動作を確認してから

jQueryMobileのデザインを対応させようとして

[code]

      <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
      <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    
[/code]

このように記載ました。

しかし、HTMLが、JavaScriptから出力されるためなのか、  
JQueryMobileのデザインにはなってくれませんでした。

次のサイトをみると、class定義をすればいいとありましたが、

A Software Engineer Blog: react.jsとjquery mobile  
<http://kentandx.blogspot.jp/2015/07/reactjsjquery-mobile.html>

input タグのclass定義がわからず、  
jQueryMoblieでは、inputタグは  
`<div class="ui-field-contain">`  
で囲って指定するようですが、  
React.js側で、divタグを指定したところで、  
やはり、JQueryMoblieのデザインにはなりませんでした。

何か、React.jsの出力を、jQueryMobileに対応させる方法など  
ありますでしょうか？

一応、試しているソースをのせておきます。  
よろしくおねがいします。

[code]

    <html><head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
          <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
          <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
          <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
          <script type="text/javascript" src="http://fb.me/react-with-addons-0.12.0.js"></script>
          <script type="text/javascript" src="http://fb.me/JSXTransformer-0.12.0.js"></script>
    <script type="text/jsx;harmony=true" language="JavaScript 1.7">
    var MyApp = React.createClass({
      getInitialState: function(){
          return {
              firstName: this.props.firstName,
              lastName:  this.props.lastName,
          }
      },
      handleChange: function(){
          var firstName = this.refs.firstName.getDOMNode().value;
          var lastName = this.refs.lastName.getDOMNode().value;
          this.setState({
              firstName: firstName,
              lastName: lastName,
                  });
      },
      render: function() {
        var fullName = this.state.firstName + this.state.lastName;
        return (
            <div class="ui-field-contain">
            First name: <input ref="firstName" onChange={this.handleChange} value={this.state.firstName}/><br/>
            Last name: <input ref="lastName" onChange={this.handleChange} value={this.state.lastName}/><br/>
            Full name: {fullName}
            </div>);
      }
    });
    React.render(<MyApp firstName="Taro" lastName="Yamada" />, document.body);
    //]]> 
    </script>
    </head>
    <body>
    </body></html>
    
[/code]


CC BY-SA 3.0
2017-04-15T07:06:39.153
34032
2019-09-09T12:59:18.860
2019-09-09T12:59:18.860
32986
21047
question
reactjs jquery-mobile
jQueryMobileとReact.jsは組み合わせられませんか？

[code]

    render: function() {
        var fullName = this.state.firstName + this.state.lastName;
        return (
            <div className="ui-field-contain">
            First name: <input className="name" ref="firstName" onChange={this.handleChange} value={this.state.firstName}/><br/>
            Last name: <input className="name" ref="lastName" onChange={this.handleChange} value={this.state.lastName}/><br/>
            Full name: {fullName}
            </div>);
    },
    componentDidMount: function() {
        $(".name").textinput().textinput("refresh");
    }
    
[/code]

jQueryMobile は動的に生成した要素に適用したい場合 refresh しなければなりませんので、componentDidMount() 内で
refresh させれば期待する動きになると思います。  
また React.jsのJSXでは class は className で指定します。


CC BY-SA 3.0
2017-04-15T16:54:03.417
34043
2017-04-16T12:31:50.700
2017-04-16T12:31:50.700
5047
5047
34032
answer