Question

我最近一直在努力学习React并且对直接DOM操作有疑问。我正在开展一个项目，在页面加载时，徽标从侧面滑入。我可以在vanilla javascript中完成这个，但是这个特殊项目在React中。我想知道是否可以做以下事情？或者，如果在React中有一种首选的方法吗？

我有以下功能：

logoSlideIn() {
  const logo = this.refs.logo;
  logo.classList.add("z-logo-reveal");
}

在componentDidMount方法中，我有：

setTimeout(this.logoSlideIn, 500);

相应的CSS是：

.z-logo {
  position: relative;
  background: url(z-logo.svg) bottom center no-repeat;
  background-size: contain;
  height: 35%;
  width: 50%;
  left: 1800px;
  transition: 4s ease-in-out;
}


.z-logo-reveal {
  left: 0;
}

它有效，但是有更好的方法吗？

Answer 1

在您真正需要直接操作DOM时很少做出反应。通常被认为不是一个好习惯，对于您的特定情况，我建议使用props来分配新的className，例如：

{
    Beer: {
        IDs: [4,5],
        Names: ['A Beer','B Beer'],
        LargeCost: [5.00,7.00],
        SmallCost: [2.50,3.50]
    },
    Wine: {
        IDs: [1,2,3],
        Names: ['Big Wine','Small Wine','Woweee'],
        LargeCost: [4.00,8.00,5.00],
        SmallCost: [2.00,4.00,2.50]
    },
    Plate: {
        IDs: [6],
        Names: ['Fish'],
        Cost: [12.00],
        AllowTemps: [0]
    }
}

Answer 2

你所拥有的一切都很好，你也可以通过设置props来实现它，它会是相似的。

在React中操作DOM

2 个答案: