動態定位React JSX按鈕

Question

我正在使用React，我需要像這樣按下這個按鈕：

但是我有一個很大的問題，因為我被禁止使用保證金或其他形式的位置，我有px值，或者rem，basicaly靜態位置。 現在，我有這個代碼

<div style={{ float: 'right' }}>
      <ActionButton style={{
        display : 'flex', 
        flex : '1',
        flexDirection: 'row',
        alignItems : 'center', 
        justifyContent : 'center',
        height: '40px',
        width: '151px',

      }} name={<div style = {{
        display : 'flex',
        flex : '2',
      backgroundColor : 'red', 
      float : 'right'
    }}>FILTRAR</div>} 
      icon={<div style = {{
        display : 'flex',
        flex : '2',
      backgroundColor : 'blue',
      width: '24px',
      height: '24px',
      float : 'left'}}><FilterIcon/></div>}>
      </ActionButton>
    </div>

而現在我的按鈕就是這樣

Answer 1

您可以使用百分比（即：50％），然后使用百分比變換（即：transform：translateX（-50％））來調整位置。如果您可以提供靜態可設置樣式的html，我可以為您生成一個示例。

Answer 2

父級的樣式應該已經將孩子（姓名和圖標）與中心對齊，而不是頂部。 是的，除非兒童本身有硬編碼的高度/邊距值，否則不需要定位樣式。

由於ActionButton的實現，可能會破壞所需的行為。

無論如何，我的建議是解決這個問題：

1. 使用flex-direction: 'row-reverse'而不是float s;
2. 從子元素中刪除display: 'flex' 。

以下是web https://codesandbox.io/s/62nynm1wzk的簡化實用示例，希望它可以幫助您入門。

更新：這是一個使用button而不是div作為容器的示例，因為它更接近原始標記： https ： //codesandbox.io/s/y7q1vlwkwj

Answer 3

嘗試刪除名稱和圖標道具中的flex和顯示樣式屬性，如下所示並檢查它。 因為flex：2將以相等的間距更改子元素的寬度。

<div style={{ float: 'right' }}>
      <ActionButton style={{
        display : 'flex', 
        flex : '1',
        flexDirection: 'row',
        alignItems : 'center', 
        justifyContent : 'center',
        height: '40px',
        width: '151px',

      }} name={<div style = {{
      backgroundColor : 'red', 
      float : 'right'
    }}>FILTRAR</div>} 
      icon={<div style = {{
      backgroundColor : 'blue',
      width: '24px',
      height: '24px',
      float : 'left'}}><FilterIcon/></div>}>
      </ActionButton>
    </div>