Question

我有以下反应脚本：

var Bilder = React.createClass({
  getInitialState: function() {
    return {
      data:[
              ['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild1.jpg'],
              ['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild2.jpg'],
              ['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild3.jpg'],
              ['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild4.jpg'],
              ['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild5.jpg']
          ],
      currentPic:[],
      display:'showBild clearfix dn',
      displayBg:'darkBg dn'
    };
  },
  showBild: function(e, data){
    console.log("PARENT COMPONENT SHOW BILD",e);
    this.setState({
      currentPic: e,
      display: 'showBild clearfix db',
      displayBg: 'darkBg db'
    });
    $('.showBild').attr('style', ''); // Hack
    $('.darkBg').attr('style', ''); // Hack
  },
  hide: function(){
    console.log("PARENT COMPONENT HIDE BILD");
    this.setState({
      display: 'showBild clearfix dn',
      displayBg: 'darkBg dn'
    });
  },
  render: function() {
    return (
      <div>
        <SingleBild data={this.state.data} chosenBild={this.showBild} />
        <BildDetail hide={this.hide} data={this.state.currentPic} display={this.state.display} displayBg={this.state.displayBg} />
      </div>
    );
  }
});

var SingleBild = React.createClass({
  getInitialState: function() {
    return {
      bild:[]
    };
  },
  showBild: function(data, e){
    e.preventDefault();
    console.log("clicked a");
    this.props.chosenBild(data);
  },
  render: function() {
    var scopeThis = this;
    var displayBild = function(bild){
         return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={scopeThis.showBild.bind(null, bild)} href="#"><i className="fa fa-eye"></i></a><a href="#"><i className="fa fa-trash-o"></i></a></li>
    };
    return (
      <ul className="dashboardUl bilder clearfix">
        <h2>Gemeldete Bilder:</h2>
        {this.props.data.map(displayBild)}
      </ul>
    );
  }

});
var BildDetail  = React.createClass({
  hide: function(){
    this.props.hide();
  },
  render: function() {
    var scopeThis = this;
    return (
      <div>
        <div className={this.props.display}>
          <img src={this.props.data[1]} alt="" />
          <span>{this.props.data[2]}</span>
          <ul>
            <li><a href="#"><i className="fa fa-trash-o"></i></a></li>
            <li><a href="#"><i className="fa fa-ban"></i></a></li>
          </ul>
        </div>
        <div onClick={this.hide} className={this.props.displayBg}></div>
      </div>
    );
  }
});

React.render(<Bilder />, document.getElementById('bilder'));

主要功能如下：

父组件<Bilder />有2个子组件<SingleBild />和<BildDetail />。有4个初始状态，data:是一个数组，包含一些虚拟条目和一些img路径，currentPic:在某些操作发生时被填充，display: + displayBg包含一些用于设置元素样式并隐藏它的类

在<SingleBild />组件中，父组件的状态数组已作为prop传递。现在它被映射并渲染出来以显示单独的元素。这些元素的内容由img和2个图标组成。一个图标是可点击的。

可点击图标调用一个函数，该函数将一些内容传递给父组件，在该组件中调用另一个函数来改变状态并设置状态currentPic, display and displayBg。

currentPic现在包含一个包含img src和所需内容的数组。其他两个状态从一个类“dn”变为“db”（=从显示无类到显示块类）

现在一个div显示在包含img和另外两个图标的内容之上。在div后面有一个100％宽度和高度的黑色背景，它有一个onClick功能。 onClick函数称为hide，它将状态从“db”更改为“dn”（=从显示块类显示为无类）

不知何故反应不仅仅改变了类，而且还创建了一个看起来像样式=“display：none”的内联样式

因此，当我单击图标再次显示弹出窗口时，类会更改，但内联样式属性仍然存在并覆盖所有类样式...

反应奇怪的行为。设置内联自动内联样式的元素

0 个答案: