React Inline Style - Как создать автоматические сгенерированные теги?

Question

Я использую Slick Carousel с React, но мне нужно изменить некоторые стили некоторых div, которые автоматически создаются Slick.

import React from 'react'; 
import Slider from 'react-slick'; 

export default class Slider extends React.Component { 
    render: function() { 
     var settings = { 
      dots: true, 
      infinite: true, 
      speed: 500, 
      slidesToShow: 1, 
      slidesToScroll: 1 
     }; 

     return (
      <Slider {...settings}> 
       <div><h3>1</h3></div> 
       <div><h3>2</h3></div> 
       <div><h3>3</h3></div> 
       <div><h3>4</h3></div> 
       <div><h3>5</h3></div> 
       <div><h3>6</h3></div> 
      </Slider> 
     ); 
    } 
}); 

Поскольку я установить точку = True, таким образом, точки будет отображаться ниже мой слайдер. Но мне нужно изменить его стиль. С встроенным стилем, как я могу это сделать?

Спасибо!

Answer 1

Редактировать - как указано позже Hung Nguyen В этом случае у slick есть dotsClass API, чтобы это было проще. Спасибо, Хун!

• Когда что-то подобное не доступно, хотя это по-прежнему работает для захвата неизвестных элементов после рендеринга:

Использования события жизненного цикла componentDidMount позволяет искать элементы после рендеринга(). Вы можете использовать ReactDOM.findDOMNode(), чтобы получить реальные элементы DOM (а не React virtual DOM). Затем просто определите элементы, которые вам нужны, и измените их стиль.

Demo using a Fork of react-slick

var ReactSlickDemo = React.createClass({ 
    componentDidMount: function() { 
    //find the unknown slider elements here 
    var elements = ReactDOM.findDOMNode(this).children[0]; 
    //modifying styles 
    elements.style.border = "5px solid red"; 
    }, 

    render: function() { 
    var settings = { 
     dots: true 
    } 
    return (
     <div className='container'> 
     <Slider {...settings} > 
      <div><img src='http://placekitten.com/g/400/200' /></div> 
      <div><img src='http://placekitten.com/g/400/200' /></div> 
      <div><img src='http://placekitten.com/g/400/200' /></div> 
      <div><img src='http://placekitten.com/g/400/200' /></div> 
     </Slider> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <ReactSlickDemo />, 
    document.getElementById('container') 
); 

Answer 2

У меня нет опыта работы с Slick каруселью, но в целом способ сделать встроенные стили в реакции заключается в следующем:

1.- создать объект стиля, с ключами, которые являются названиями стилей CSS , но верблюд. Так, например, font-size становится fontSize, border-with становится borderWidth и т.д.

2.- Назначают этот объект в style реквизита вашего элемента JSX.

Вы также можете назначить стили объекта непосредственно на опору, как буквальное

пример из React docs:

var divStyle = { 
    color: 'white', 
    backgroundImage: 'url(' + imgUrl + ')', 
    WebkitTransition: 'all', // note the capital 'W' here 
    msTransition: 'all' // 'ms' is the only lowercase vendor prefix 
}; 

ReactDOM.render(<div style={divStyle}>Hello World!</div>, mountNode); 

Есть также более полные решения для встроенных стилей, как Radium, если вы решите пройти полный инлайн.

Надеюсь, это поможет.

Answer 3

ИМО, лучший способ заключается в использовании dotsClass повторно стиле стиль точек самостоятельно

var ReactSlickDemo = React.createClass({ 
    render: function() { 
    var settings = { 
     dots: true, 
     dotsClass: 'custom-dots' 
    } 
     return (
     <div className='container'> 
     <Slider {...settings} > 
      <div>1</div> 
      <div>2</div> 
      <div>3</div> 
      <div>4</div> 
     </Slider> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <ReactSlickDemo />, 
    document.getElementById('container') 
); 

Full demo with CSS

Это еще один способ.Используйте это только если вам не нужно, чтобы изменить стиль активной точки

var ReactSlickDemo = React.createClass({ 
    componentDidMount: function() { 
    var $stickContainer = $(ReactDOM.findDOMNode(this)).find('.stickContainer'); 
    // Need to defer because there is no dots at this moment 
    // Dots are rendered after slide content rendered for calculating number of slide 
    // https://github.com/akiran/react-slick/blob/master/src/inner-slider.jsx#L101 
    setTimeout(function() { 
     var $dots = $stickContainer.find('li'); 
     $dots.css('background-color', 'red'); 
     }, 0); 
    }, 

    render: function() { 
    var settings = { 
     dots: true, 
     className: 'stickContainer' 
    } 
     return (
     <div className='container'> 
     <Slider {...settings} > 
      <div><img src='http://placekitten.com/g/400/200' /></div> 
      <div><img src='http://placekitten.com/g/400/200' /></div> 
      <div><img src='http://placekitten.com/g/400/200' /></div> 
      <div><img src='http://placekitten.com/g/400/200' /></div> 
     </Slider> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <ReactSlickDemo />, 
    document.getElementById('container') 
); 

DEMO

Answer 4

просто использовать CSS с: глобальные

:global(.slick-active){ 
     background-color:#71afe5 
    } 

Работы для меня