Могу ли я использовать подобный по реакции flex аналог для начальной загрузки системы строк / столбцов?

Question

Является ли это хорошей идеей использовать flex в реагировать на нативном языке, как этот, - создавать свои собственные компоненты, которые извлекают значения flex? Я раньше использовал систему сетки начальной загрузки, а теперь я пытаюсь научиться реагировать на нативный.

Есть ли какой-нибудь способ показать этот пример с использованием начальной загрузки реакции в стеке?

let FlexContainer = ({direction,children}) =>{
  console.log(direction)
  var style = {
  
    flexDirection:direction || 'row',
    display:'flex',
    width:'100%',
    height:'100%'
  
  }
  return(<div style={style}>{children}</div>)

}

let FlexBox = ({val, color, children}) => {

  return (
    <div style={{backgroundColor:color, flex:val}}>{children}</div>
  )

}




class LayoutExample extends React.Component {

  constructor(props){
    super(props)
  }
  
  render(){
  
    return(
    <div className='screen'>
      <FlexContainer>
        <FlexBox val={1} />
        <FlexBox color="blue" val={1} />
        <FlexBox color="red" val={1} />
      </FlexContainer>
    </div>
    )
    
  
  }

}

ReactDOM.render(<LayoutExample />,document.getElementById('example'))

.screen {

  width:400px;
  height:300px;
  border:2px solid black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<div id="example"></div>

Этот подход действителен или нет?

Answer 1

Это действительно так, хотя, на мой взгляд, лучше максимально отделить стилистические соображения от логики.

Раньше я тоже работал с начальной загрузкой, но с тех пор, как я перешел на собственную реакцию, я не использовал какую-либо сеточную систему и не чувствовал, что что-то упустил, каждый экран, который я оформляю в соответствии с тем, что мне нужно от этого экрана, и Проклятие, пытаясь использовать компоненты как можно больше.