從具有多個實例的組件中選擇類

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 使用的是類組件，但是……我想是我發明的。