动态定位React JSX按钮

Question

I am working with React and I need put this button like that:

but I have a big problem because I am forbidden to use margin or other form of positional where I have values with px, or rem, basicaly static positional. Now, I have this code

<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>

And now my button is like that

Answer 1

您可以使用百分比（即：50％），然后使用百分比变换（即：transform：translateX（-50％））来调整位置。如果您可以提供静态可设置样式的html，我可以为您生成一个示例。

Answer 2

Parent's styles should already align children (name and icon) by the center, not by the top. And yes, no positioning styles are required, unless there are hardcoded heigh/margin values in children itself.

Desired behavior can be broken because of the implementation of ActionButton .

Anyway, my suggestions to tackle this issue:

1. use flex-direction: 'row-reverse' instead of float s;
2. remove display: 'flex' from child elements.

Here is a simplified and working example for web https://codesandbox.io/s/62nynm1wzk , hope it can help you to get started.

Update: here is an example using button instead of div as container, since it is closer to original markup: https://codesandbox.io/s/y7q1vlwkwj

Answer 3

Try to remove the flex and display style property in name and icon props like below and check it. Because flex:2 will change the width of child element with equal spacing.

<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>