React Inline Style - 自動生成されたタグのスタイルを設定するには？

Question

私はReactでSlick Carouselを使用していますが、Slickによって自動的に作成されるいくつかのdivのスタイルを変更する必要があります。

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> 
     ); 
    } 
}); 

私はドット=真、そうは私のスライダーの下に表示されますドットを設定しているため。しかし、私はそのスタイルを変える必要があります。インラインスタイルで、どうすればいいですか？

ありがとうございます！

Answer 1

編集 - 後でHung Nguyenと書かれています。slickは設定APIにdotsClassを持っていますので、これは簡単です。ありがとう！

• そのようなことはしかし利用できない場合、これはまだ後にレンダリングする未知の要素をつかむために働く：ライフサイクルイベントcomponentDidMountを使用して

はあなたが後に（）を描画要素を探すことができます。 ReactDOM.findDOMNode()を使用して、実際のDOM要素（React仮想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

私はスリックカルーセルと経験を持っていないが、一般的には反応にインラインスタイルを行う方法は次のとおりです。

1.- CSSスタイル名でキーを使用して、スタイルオブジェクトを作成しますしかし、ラクダはケースに入った。だから、例えば、font-sizeはborder-with等

、borderWidthなり、fontSizeなり2.-あなたJSX要素のstyle小道具にそのオブジェクトを割り当てます。

また、スタイルが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

IMO、最良の方法は、これは別の方法で自分でドットのスタイルを再スタイルに

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

をdotsClassを使用することです。あなたは、単にと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

のスタイルを変更する必要がない場合は、これをのみを使用します。