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

因为我设置了 dots = true，所以 dots 将显示在我的 slider 下方。但我需要改变它的风格。使用内联样式，我该怎么做？

谢谢!

Answer 1

编辑 - 稍后由 Hung Nguyen 指出slick 有一个 dotsClass在他们的设置 API 中，这样可能会更简单。谢谢洪!

• 当类似的东西不可用时，这仍然适用于在渲染后抓取未知元素:

使用生命周期事件 componentDidMount允许您在 render() 之后查找元素。您可以使用 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')
);