小编Sam*_*ian的帖子

我知道已经存在类似的问题,但那里没有共享代码.

在navbarChanged()>如果条件下,我正在做this.setState.这是类型,HomeTab但setState似乎没有工作.

任何线索/指针？

class HomeTab extends React.Component {
  constructor() {
    super()

    this.setState({
      isNavBarHidden: false
    });
  }

  updatePosition(lastPosition) {
  }

  navbarChanged() {
    console.log("received navbar changed event", AppStore.navbarVisible());

    if (AppStore.navbarVisible()) {
      StatusBarIOS.setHidden(false)
      this.setState({ isNavBarHidden: false})
      // this.state.isNavbarHidden is still true here
      this.render();
    }
    else {
      StatusBarIOS.setHidden(true);
      this.setState({ isNavBarHidden: true});
      this.render();
    }
  }

  componentDidMount() {
    AppStore.addNavbarChangeListener( this.navbarChanged.bind(this) );
  }

  componentWillMount() {
    StatusBarIOS.setHidden(false)
    this.setState({ isNavBarHidden: false });
  }
}

这是我的render()代码:

  render() {
    return (
        <NavigatorIOS style={styles.container} …

我正在测试组件中的键绑定功能.该组件非常简单,用于事件监听器keyup并触发一个将隐藏组件的redux操作.

我在这里清理了我的代码,只提供相关信息.如果我只是使用商店调度来进行动作调用,我能够通过测试,但这当然会破坏这个测试的目的.我使用Enzyme模拟keyup事件与适当的事件数据(键代码esc),但我遇到了以下错误.

MyComponent.js

import React, {Component, PropTypes} from 'react';
import styles from './LoginForm.scss';
import {hideComponent} from '../../actions';
import {connect} from 'react-redux';

class MyComponent extends Component {
  static propTypes = {
      // props
  };

  componentDidMount() {
    window.addEventListener('keyup', this.keybindingClose);
  }

  componentWillUnmount() {
    window.removeEventListener('keyup', this.keybindingClose);
  }

  keybindingClose = (e) => {
    if (e.keyCode === 27) {
      this.toggleView();
    }
  };

  toggleView = () => {
    this.props.dispatch(hideComponent());
  };

  render() {
    return (
      <div className={styles.container}>
        // …

在React中为元素设置动画时,我们可以使用以下代码段:

      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>

随着赞美css动画.

我已经阅读了文档(在这里找到:https://facebook.github.io/react/docs/animation.html)但我不是100%确定两个超时属性实际上做了什么？如果动画没有完成,我会冒险猜测它们是一个后备吗？

值是否与css输入/输出持续时间值匹配,还是应该大于动画值？

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

因此，这就是问题所在：http : //bildr.no/view/927562

仔细看看：http : //bildr.no/view/927563

如您所见，每个角的边框变为不可见。这是图像的CSS代码：

#contentImage {
  float: left;
  border: 1px solid #C4C4C4;
  border-radius: 8px;
  margin-right: 25px;
}

<img src="images/image.jpg" id=contentImage" />

任何帮助将大大赞赏:-)

我试图做一个会粘在页面底部的页脚,而不是让它粘到原始窗口的底部位置.当我滚动时,我最终将页脚粘在页面中间.

我并没有尝试将其修复并粘贴到页面上.

当我没有足够的内容滚动一切都很好.(至少看起来那样)

对应的HTML:

<footer class="footer_div">
  <div class="container">
    <p>Sam Sedighian - No rights reseved!</p>
  </div>
</footer>

对应的CSS:

.footer_div {
  background-image: url("../imgs/dark_dotted2.png");
  color: #818787;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  padding-top: 10px;
  text-align: center;
}

它必须位于页面底部而不是粘性(固定),并且仅在滚动到页面底部时才可见.所以它应该适用于这两个例子:sedighian.github.io/blog/absolute_not_working.html和sedighian.github.io/blog/absolute_not_working2.html