Question

即时实现滑块出现问题-它显示灰色背景。我不知道初始化是否有问题。但是当我使用旋转木马时，它会起作用。

使用M.AutoInit（）初始化

 import React, { Component } from "react";
 import M from "materialize-css";
 import burger1 from "./img/burgers/burger1.jpg";
 import burger2 from "./img/burgers/burger2.jpeg";
 import burger3 from "./img/burgers/burger3.jpg";
 import burger4 from "./img/burgers/burger4.jpg";

 class SliderBurger extends Component {
 componentDidMount() {
 M.AutoInit();
 }
 render() {
 return (
  <div>
    <div className="slider">
      <ul className="slides">
        <li>
          <img src={burger1} alt="" />
          <div className="caption center-align">
            <h3>Hello</h3>
          </div>
        </li>
        <li>

Answer 1

您可以使用React提供的ref来实现。在此网站上查看Slider的演示-Reactize - Slider 您可以从此仓库中查看其他组件的代码-GermaVinsmoke - Reactize

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

import Image1 from "../public/architecture-art-buildings-548094.jpg";
import Image2 from "../public/architecture-automobile-buildings-950223.jpg";
import Image3 from "../public/architecture-bridge-city-161853.jpg";
import Image4 from "../public/beach-clouds-dream-60217.jpg";

class Slider extends Component {
  componentDidMount() {
    const options = {
      indicators: true,
      height: 500,
      interval: 4000,
      duration: 500
    };
    M.Slider.init(this.Slider, options);
  }

  render() {
    return (
      <div
        ref={Slider => {
          this.Slider = Slider;
        }}
        className="slider"
      >
        {/* If you want fullscreen slider then add fullscreen to
      this div */}
        <ul className="slides">
          <li>
            <img src={Image1} />
            <div className="caption center-align">
              <h3>This is our big Tagline!</h3>
              <h5 className="light grey-text text-lighten-3">
                Here's our small slogan.
              </h5>
            </div>
          </li>
          <li>
            <img src={Image2} />
            <div className="caption left-align">
              <h3>Left Aligned Caption</h3>
              <h5 className="light grey-text text-lighten-3">
                Here's our small slogan.
              </h5>
            </div>
          </li>
          <li>
            <img src={Image3} />
            <div className="caption right-align">
              <h3>Right Aligned Caption</h3>
              <h5 className="light grey-text text-lighten-3">
                Here's our small slogan.
              </h5>
            </div>
          </li>
          <li>
            <img src={Image4} />
            <div className="caption center-align">
              <h3>This is our big Tagline!</h3>
              <h5 className="light grey-text text-lighten-3">
                Here's our small slogan.
              </h5>
            </div>
          </li>
        </ul>
      </div>
    );
  }
}

export default Slider;

物化滑块不起作用，显示灰色背景

1 个答案: