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

Question

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

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

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

Answer 1

给你两个答案:

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

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

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

来自Style and CSS - React :

React can be used to power animations. See React Transition Group and React Motion or React Spring, for example.

这是添加类来触发(非常无聊)转换的示例:

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>

但是如果你这样做(或想要)...

...您使用 refs对于那些需要像这样跨越 React/DOM 边界的场合。

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>

<小时/>

以上两者都可以通过钩子(Hook)来完成，您不需要使用类组件。出于某种原因，我有这样的印象:OP 使用类组件，但是……我想我发明了它。