Question

每次事件发生时，我想更改某些对象的左侧位置。我该怎么办？

我正在渲染另一个组件中的组件列表。这些元素位于absolute位置，（随机）left位置作为道具被传递。

getAllWorksTiles() {
  const elementsList = this.getElementsList();

  return elementsList.map(
    e =>
      <WorksTile
        title={ e.title }
        description={ e.description }
        key={ e.title }
        left={ this.getRandomHPos() }
        image={ e.image }
        link={ e.link }/>
  )
}

getRandomHPos() {
  return Math.random() * 60;
}

我正在使用React Router DOM，我想在每次页面被推入或推入时重新定位这些元素（所以this.props.history.action !== 'REPLACE'）。

我尝试重新安装整个组件，但是我确定有更聪明的方法吗？

Answer 1

将“ left”值存储在状态中，然后使用该值来设置元素的样式。

每当您的“某些事件”发生时，您就调用执行随机化的函数，并通过setState（）更新“左”状态。

setState（）将导致重新渲染-依次更新您元素的位置

示例： https://codesandbox.io/s/pj8rp70zo0

在位置上刷新元素在React中的位置未更改

1 个答案: