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

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

<FadeInAnimation>
    <SomeReactElement />
</FadeInAnimation>

这会变得很麻烦

我真正想要的是一个方便的方法，我可以在FadeInAnimation组件中使用它，可以找到最外层的React元素，它是HTML标记类型

我无法通过this.props.children对其进行反应，因为div不是

SomeReactElement

的子级

---

我知道我可以将元素封装在or中，但在许多情况下它会破坏设计。

我认为您将一个更简单的问题复杂化了：）

如果您想要实现一个

FadeAnimation

组件，它可以简单地包装它的所有子组件并为包装器设置动画。瞧

这是一支笔，上面有一个完整的例子：

基本上：

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'))

---

您的问题有点让人困惑，您是否试图将不同的样式传递给某个ReactElement，您希望通过标记类型将其应用于不同的元素？我尝试的是在

FadeInAnimation

对象中有一个通用的Behvaiur，因此，当它将保存当前插值不透明度值的

样式

对象传递给其子对象时，它不关心它是一个复杂的React元素，例如

SomeReactElement

，它不能直接进行样式化，还是一个简单的元素，例如

div

，它可以直接进行样式化。什么样的组件不能直接进行样式化？组件，例如

SomeReactElement

。如果你给他们传递一个样式道具，他们就不能告诉他们应该把它应用到哪个子元素上。我认为他们可以：任何react组件都可以而且必须只渲染一个组件（div或其他），因此传递下来的样式可以始终应用到render函数中的top元素上。

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

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'))

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