Question

我正在努力实现以下目标：

<FadeInAnimation>
    <SomeReactElement />
</FadeInAnimation>

反应元素可能是：

SomeReactElement.render = ()=>{

   return <div>hi</div>

}

FadeInAnimation只是插入一个样式对象，并通过React.cloneElement(this.props.children ...).将其传递给它的孩子

问题是SomeReactElement无法正确处理样式道具（因为它需要知道将哪个HTML标记元素（例如div）应用到它上面）。

我可以将{...props}传递给div，然后传递给更复杂的层次结构，例如

 <ReactElement1>
     <ReactElement2>
        <SomeReactElement />
     </ReactElement2>
 </ReactElement1>

这变得很麻烦。

我真正喜欢的是一种方便的方法，我可以在FadeInAnimation组件中使用它，它可以找到最符合HTML标签类型的React元素。

我无法通过this.props.children做出反应，因为div不是SomeReactElement的孩子。

我知道我可以将元素包装在一个内部，但在许多情况下会破坏设计。

Answer 1

我认为你过于复杂化了一个更简单的问题：）

如果你想实现一个FadeAnimation组件，它可以简单地包装它的所有子项并为该包装器设置动画。瞧！

这是一支带有完整示例的笔：http://codepen.io/gadr90/pen/Gpwdbq?editors=011

基本上：

const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup

const FadeAnimation = React.createClass({
  render() {
    return (
      <ReactCSSTransitionGroup 
        transitionName="example" 
        transitionEnterTimeout={500} 
        transitionLeaveTimeout={500}>
        {this.props.show &&
          <div key="content">
            {this.props.children}
          </div>
        }
      </ReactCSSTransitionGroup>
    )
  }
})

const App = React.createClass({
  getInitialState() {
    return { show: false }
  },

  toggle() {
    this.setState({ show: !this.state.show })
  },

  render() {
    return (
      <div>
        <button onClick={this.toggle}>Toggle</button>

        <FadeAnimation show={this.state.show}>
          <div key="content">Content</div>
        </FadeAnimation>
      </div>
    )
  }
});

React.render(<App />, document.getElementById('content'))

对于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 500ms ease-in;
}

使用包装器将样式应用于元素

1 个答案: