React“渲染后”代码?

我有一个应用程序，我需要动态设置一个元素的高度(让我们说“app-content”)。它取应用程序的“chrome”的高度并减去它，然后设置“app-content”的高度以100%符合这些限制。这是超级简单的香草JS, jQuery，或骨干视图，但我努力弄清楚正确的过程将在React中这样做?

下面是一个示例组件。我想要能够设置应用内容的高度为窗口的100%减去动作栏和BalanceBar的大小，但我怎么知道什么时候所有的渲染和哪里我将把计算的东西在这个反应类?

/** @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;

当前回答

componentDidMount ()

此方法在呈现组件后调用一次。你的代码应该是这样的。

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>
    );
  }
});

2014-10-25 04:58:37

其他回答

componentDidMount ()

此方法在呈现组件后调用一次。你的代码应该是这样的。

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>
    );
  }
});

2014-10-25 04:58:37

只是用新的Hook方法来更新一下这个问题，你可以简单地使用useEffect钩子:

import React, { useEffect } from 'react'

export default function App(props) {

     useEffect(() => {
         // your post layout code (or 'effect') here.
         ...
     },
     // array of variables that can trigger an update if they change. Pass an
     // an empty array if you just want to run it once after component mounted. 
     [])
}

另外，如果你想在布局绘制之前运行，使用useLayoutEffect钩子:

import React, { useLayoutEffect } from 'react'

export default function App(props) {

     useLayoutEffect(() => {
         // your pre layout code (or 'effect') here.
         ...
     }, [])
}

2019-06-06 10:20:49

当我需要打印接收大量数据的react组件并在画布上绘制时，我遇到了奇怪的情况。我已经尝试了所有提到的方法，它们都不可靠地为我工作，与requestAnimationFrame内setTimeout我得到空画布在20%的时间，所以我做了以下工作:

nRequest = n => range(0,n).reduce(
(acc,val) => () => requestAnimationFrame(acc), () => requestAnimationFrame(this.save)
);

基本上我做了一个requestAnimationFrame的链，不确定这是好主意还是不好，但这在100%的情况下为我到目前为止(我使用30作为n变量的值)。

2018-08-05 21:52:07

在尝试了上面所有建议的解决方案后，没有运气，我发现我的一个元素在中间有CSS过渡，这就是为什么我不能得到正确的计算几何后道具改变。所以我不得不使用onTransitionEnd监听器等待片刻，当尝试获得容器元素的DOM高度计算。希望这能节省一些人的工作日，哈哈。

2021-06-14 20:38:24

用ES6类代替React.createClass进行了一点更新

import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    // this code might be called when there is no element avaliable in `document` yet (eg. initial render)
  }

  componentDidMount() {
    // this code will be always called when component is mounted in browser DOM ('after render')
  }

  render() {
    return (
      <div className="component">
        Some Content
      </div>
    );
  }
}

另外，检查React组件生命周期方法:组件生命周期

每个组件都有很多类似componentDidMount的方法。

componentWillUnmount() -组件即将从浏览器DOM中删除

2017-02-13 14:26:17

React“渲染后”代码?

推荐文章

最新文章

标签