☰

Reactの「レンダリング後」コード？質問する

tag-icon • tag-icon javascript reactjs
Reactの「レンダリング後」コード？質問する

要素 (「app-content」とします) の高さを動的に設定する必要があるアプリがあります。アプリの「chrome」の高さを取得してそれを減算し、「app-content」の高さをそれらの制約内に 100% 収まるように設定します。これは、Vanilla JS、jQuery、または Backbone ビューでは非常に簡単ですが、React でこれを行うための適切なプロセスが何であるかを把握するのに苦労しています。

以下はコンポーネントの例です。app-contentの高さをウィンドウの 100% から と のサイズを引いた値にActionBar設定できるようにしたいのですBalanceBarが、すべてがレンダリングされたことをどのように確認すればよいのでしょうか。また、この React クラスのどこに計算要素を配置すればよいのでしょうか。

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar title="Title Here" />
          <BalanceBar balance={balance} />
          <div className="app-content">
            <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

module.exports = AppBase;

ベストアンサー1

コンポーネントマウント()

このメソッドは、コンポーネントがレンダリングされた後に 1 回呼び出されます。したがって、コードは次のようになります。

var AppBase = React.createClass({
  componentDidMount: function() {
    var $this = $(ReactDOM.findDOMNode(this));
    // set el height and width etc.
  },

  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
          <div className="inner-wrapper">
            <ActionBar title="Title Here" />
            <BalanceBar balance={balance} />
            <div className="app-content">
              <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

おすすめ記事