从具有多个实例的组件中选择类

Question

我的页面上有两个组件实例，我需要选择它的类来进行 css 转换，它可以工作，但问题是第一个实例是唯一被触发的实例。

const carousel = document.querySelector(".carousel-slide");
carousel.style.transform = `translateX(-100%)`;

当我点击一个按钮时，我的轮播应该是下一个，但我总是选择第一个.carousel-slide所以即使我点击组件的第二个实例上的下一个按钮，第一个实例是受到影响的

Answer 1

给你两个答案：

1. 您可能不需要在 DOM 级别执行此操作。

2. 如果你这样做，你使用“refs”

您可能不需要在 DOM 级别执行此操作

从样式和 CSS - React ：

React 可用于为动画提供动力。 例如，请参阅React Transition Group和React Motion或React Spring 。

这是添加类以触发（非常无聊的）转换的示例：

 class Example extends React.Component { constructor(props) { super(props); this.state = { transformed: false }; this.triggerTransform = this.triggerTransform.bind(this); } triggerTransform() { this.setState({transformed: true}); } render() { const {transformed} = this.state; return <div className={transformed ? "transformed" : undefined} onClick={this.triggerTransform}>Click me</div>; } } ReactDOM.render(<Example/>, document.getElementById("root"));

 .transformed { transform: translateX(+10%); }

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

但是，如果您这样做（或想要）...

...你在那些需要跨越 React/DOM 边界的场合使用refs 。

1. 创建参考
2. 在定义要定位的元素的 JSX 上使用它
3. 当您需要对实际 DOM 元素执行某些操作时，请使用 ref 的current属性

粗略的例子：

 class Example extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); this.triggerTransform = this.triggerTransform.bind(this); } triggerTransform() { if (this.myRef.current) { this.myRef.current.style.transform = `translateX(+10%)` } } render() { return <div ref={this.myRef} onClick={this.triggerTransform}>Click me</div>; } } ReactDOM.render(<Example/>, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

---

以上两个都可以用钩子来完成，你不需要使用类组件。 出于某种原因，我觉得 OP 使用的是类组件，但是……我想是我发明的。