Блог

Привет, у меня есть этот код, использующий React.js :

 import React, { Component } from 'react';
import Select from "./components/Select/Select";
import Switch from "./components/Switch/Switch";

class App extends Component {
  state = {
    Test : [
        {value : "0", name : "1"},
    ]
  }
    render() {
        return (
        <>
          <div className="form-inline">
          <div className="col-sm-9">
          <Select list={[...this.state.Test]}/>
          <Switch />
          </div>
          </div>
        </>
        );
}
} 
  

где Select.js :

 import React from "react";

const selectoption = ({ list }) => (
    <select className="custom-select">{list.map(option => (<option key={option.value} value={option.value}>{option.name}</option>))}
</select>
);

export default selectoption;
  

И последний файл Switch.js :

 import React from "react";

const switchoption = () => (<div className="custom-control custom-switch">
<input type="checkbox" className="custom-control-input" id="customSwitch1" />
    <label className="custom-control-label" htmlFor="customSwitch1">Slot/Map</label>
</div>);

export default switchoption;
  

Но проблема в том, что у меня нет выбора рядом с переключателем, как я хочу.

[! [Мой рисунок] [1]] [1]

Большое вам спасибо! [1]: https://i.stack.imgur.com/CSlRi.png

Вы можете использовать flexbox здесь. Аналогично приведенному ниже коду. В случае реакции используйте className вместо class . Оберните divs, которые должны быть рядом друг с другом, в родительский класс, который имеет гибкое направление строки типа, а каждый из дочерних классов должен иметь гибкое направление столбца типа. Это очень похоже на макет строки таблицы.

Эта ссылка очень полезна: https://css-tricks.com/snippets/css/a-guide-to-flexbox /

 .parent {
  display: flex;
  flex-direction: row
  width: 100%;
}

.child {
  display: flex;
  flex-direction: column;
}  

 <div class="parent">
      <div class="child">Child 1</div>
      <div class="child">Child 2</div>
</div>  

вам просто нужно обернуть их оба в гибкий контейнер

 class App extends Component {
  state = {
    Test : [
        {value : "0", name : "1"},
    ]
  }
    render() {
        return (
        <>
          <div className="form-inline">
             <div className="flex">
                 <Select list={[...this.state.Test]}/>
                 <Switch />
             < /div>
          </div>
        </>
        );
}
} 
  

в css

 .flex{
display:flex;
width:100% ;
justify-content:space-between;
align-items:center;
}
.flex select {
 flex:1;
  display:inline;
}