无需Node.js环境，如何通过CDN或本地引入使用ReactCSSTransitionGroup？

Absolutely! You don’t need Node.js, npm, or any server setup to use <ReactCSSTransitionGroup> — you can pull it in via CDN just like you’re doing with React and ReactDOM. Let’s fix that broken Cloudflare link issue and get you up and running.

方案1：使用适配React 15的react-transition-group CDN #

你之前用的Cloudflare链接本身没问题，但在v2.x的react-transition-group里，<ReactCSSTransitionGroup>并不是直接挂载到全局window对象上，而是嵌套在ReactTransitionGroup命名空间下。调整你的引用和使用方式即可：

首先，添加这个兼容的CDN链接（可以替换你现有的过渡组件脚本）：

<script src="https://unpkg.com/react-transition-group@2.3.1/dist/react-transition-group.min.js"></script>

在你的JSX代码里，通过全局命名空间获取组件：

const ReactCSSTransitionGroup = ReactTransitionGroup.ReactCSSTransitionGroup;

之后就可以正常使用组件了，示例代码如下：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ['Item 1', 'Item 2', 'Item 3'] };
  }

  render() {
    const items = this.state.items.map((item, index) => (
      <div key={index} className="item">
        {item}
      </div>
    ));

    return (
      <div>
        <ReactCSSTransitionGroup
          transitionName="example"
          transitionEnterTimeout={500}
          transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

别忘了添加对应的过渡样式：

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

方案2：使用旧版react-addons-css-transition-group（更贴近原始写法） #

如果你更习惯直接调用<ReactCSSTransitionGroup>而不需要额外命名空间，可以引入React官方曾经的附加组件包，它和React 15完全兼容：

添加这个CDN链接：

<script src="https://unpkg.com/react-addons-css-transition-group@15.6.2/dist/react-addons-css-transition-group.min.js"></script>

这个包会把组件直接挂载到React.addons.CSSTransitionGroup，也可以直接全局访问ReactCSSTransitionGroup，使用起来更直接：

// 两种调用方式任选其一
const ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
// 或者直接使用全局变量：<ReactCSSTransitionGroup>...</ReactCSSTransitionGroup>

关键注意事项 #

• 版本匹配：确保过渡组件版本和你的React版本一致（你用React 15，所以选15.x的react-addons-css-transition-group或v2.x的react-transition-group，v3+版本只支持React 16+）。
• 加载顺序：过渡组件的脚本要放在React和ReactDOM脚本之后，确保全局变量能正常访问。

这样你就能完全在静态HTML文件里使用<ReactCSSTransitionGroup>，不需要任何Node.js或构建工具配置！

内容的提问来源于stack exchange，提问作者code beginner