Как стилизовать каждый компонент в React? - PullRequest
Новая
       12

Как стилизовать каждый компонент в React?

0 голосов
/ 02 марта 2019

У меня следующий код React, и это CSS для функции прокрутки.Когда я делаю props.children.map, он выдает ошибку «TypeError: props.children.map не является функцией».Это может быть простой ошибкой, так как я все еще изучаю React.js.Любая помощь будет оценена.Спасибо! 

**Scroll.js**

import React from 'react';
import './Scroll.css'

const Scroll = (props) => {

    return(
        <div class="slider">
        <div class="slide">

        {props.children.map((component) => 
        <div class="slide"> component </div>)
        }

        </div>
        </div>
    );
};
export default Scroll;

Scroll.css 

.slider {
  width: 300px;
  height: 300px;
  display: flex;
  overflow-x: auto;
}
.slide {
  width: 300px;
  flex-shrink: 0;
  height: 100%;
}

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

Ошибка, которую вы получаете, имеет смысл, потому что children - это всего лишь один ReactNode, а map будет работать только с массивом из нескольких значений.

Вы можете сделать что-то вроде: 

import React from "react";
import "./Scroll.css";

const Scroll = props => {
  return (
    <div class="slider">
      <div class="slide">{props.children}</div>
    </div>
  );
};
export default Scroll;

И вызвать Scroll, как: 

const SomeParentComponent = () => {
  return (
    <Scroll>
      <div>
        <SomeChild />
        <SomeChild />
        <SomeChild />
      </div>
    </Scroll>
  );
};
0 голосов
/ 02 марта 2019

Вы можете преобразовать свой css в объект, например 

const styles = ({
input: {
    display: 'none',
},
pointerBorder: {
    borderWidth: '4px',
    borderStyle: 'dashed',
    borderColor: 'grey',
    paddingTop: '40px',
    paddingBottom: '40px',
},
iconUpload: {
    fontSize: '100px',
    cursor: 'pointer',
}

});

это всего лишь один пример.Для использования просто вызовите de object 

            <div className={styles.input}>

Еще одна вещь.Попробуйте прокомментировать код 

{props.children.map((component) => 
    <div class="slide"> component </div>)
    }

и запустите снова, я думаю, что это не проблема стиля.

...