React 面板在未直接加载的选项卡中被压扁 - React Equalizer

Question

我正在使用 React、Redux 和 Bootstrap 设置。我正在构建具有不同选项卡的图书网站，其中选项卡是通过不同选项卡具有相同 ID 的项目（书籍）。我所有的数据都存储在商店中并像这样传递到面板：TabsContainer（在这里我过滤书籍并通过道具传递）-> [所有，收藏夹，...]->书籍列表（对于每个）-> 书（都一样）。

很难 post 所有代码和基本概念，因为我不知道哪里出了问题。我改为 post 结果。

这是可以的地方。我也可以通过调整 window 的大小来修复这个错误，但它会影响其他 4 个选项卡。

这显然是一个错误。当我离开初始选项卡时，总是会出现错误。

有什么问题吗？我应该设置不同的键吗？但如果我理解正确的话，反应会做必要的渲染。

更新发现罪魁祸首是我用来匹配列大小（bootstrap 响应）的反应均衡器，以便按钮行出现在机器人上。我认为这与 React 不兼容有关。 所以现在的问题是如何将按钮行放在面板的底部。

 <div className="col-md-12 col-lg-6">
                <div className="panel panel-default no-padding">
                    <div className="panel-body contentRow" style={book_item.mainContainer}>
                        <Equalizer>
                            <div className="col-xs-12 col-sm-6" style={book_item.imageContainer}>
                                <div>
                                    <FavoriteIcon reading={reading} style={book_item.favorites}
                                                  onFavoriteChanged={this.onFavoriteChanged}/>
                                    <Link to={"readings/"+reading.id+"/edit"} params={{id: reading.id}} style={book_item.imageLink}>
                                        <img
                                            src={'http://smartbooky.hopto.org/media/images/books/' + reading.book.id + '.jpg'}
                                            height="210px" style={book_item.bookImage}/>
                                    </Link>
                                </div>
                            </div>
                            <div className="col-xs-12 col-sm-6" style={book_item.textContainer}>
                                <div className="bookTitle">
                                    <strong>{reading.book.title}</strong><br/>
                                </div>
                                <div className="bookSubtitle">
                                    {(() => {
                                        if (reading.book.subtitle)
                                            return (<div><em>{reading.book.subtitle}</em> <br/></div>);
                                    })()}
                                </div>
                                <div className="bookAuthors">
                                    <div>{authors ? authors : "Unknown author"}<br/></div>
                                </div>
                                <div className="bookDescription hidden-xs" style={book_item.bookDescription}>
                                    {truncatedDescription.replace(/<\/?[^>]+(>|$)/g, "")}
                                </div>
                                <div className="bookTags hidden-xs row" style={book_item.bookTags}>
                                    {reading.book.genre ? BookCard.renderTags(reading.book.genre) : void(0)}
                                </div>
                                <div className="buttonRow"
                                     style={window.innerHeight > 400 ? book_item.buttonRow : void(0)}>
                                    <div className="col-xs-4">
                                        <Button icon="glyphicon glyphicon-remove" name="Remove" kind="primary"
                                                handleClick={this.onReadingDelete} style={book_item.buttonRemove} />
                                    </div>
                                    <div className="col-xs-4">
                                        <Button icon="glyphicon glyphicon-th-list" name="Shelf" kind="primary"/>
                                    </div>
                                    <div className="col-xs-4">
                                        <Button icon="glyphicon glyphicon-edit" name="Edit" kind="primary"/>
                                    </div>
                                </div>
                            </div>
                        </Equalizer>
                    </div>
                </div>
            </div>

Answer 1

我想在回答这个问题之前，我们需要了解一些事情：

1. 这些 Bootstrap 选项卡是否在它们之间的切换方面实现了某种 non-React JavaScript？我知道 Bootstrap 不仅提供了 CSS 文件用于安装，而且还可以提供一些 JavaScript 来使用它的一些组件。

2. 我猜在您发布的图片中，您是从“收藏夹”选项卡导航到“全部”选项卡？如果是这样，“全部”选项卡应该显示什么？（有可能它实际上正在渲染预期的元素，只是 css 让它看起来不对。）

3.如果上面两点不是问题的根源，那么我们就需要看一些代码，至少是涉及到的组件的render函数，以及他们的状态。

Answer 2

react-equalizer 的创建者。这可能是在加载图像之前发生的均衡问题。我刚刚发布了一个解决此问题的新版本 (1.0.5)。

这是一个带有 react-bootstrap 个选项卡的工作示例：

http://jsbin.com/mayanakiqo/edit?js,output

class MyComponent extends React.Component {
  render() {

    let colStyles = {
      float: 'left',
      width: '50%',
      padding: '10px',
      background: '#ddd',
      border: '4px solid white',
      boxSizing: 'border-box'
    }

    return (
      <div>
        <Tabs defaultActiveKey={2}>
          <Tab eventKey={1} title="Tab 1">
            <Equalizer byRow={false}>
              <div style={colStyles}>
                <img src="http://placehold.it/200x300" />
              </div>
              <div style={colStyles}>
                Test content
              </div>
            </Equalizer>
          </Tab>
          <Tab eventKey={2} title="Tab 2">
            <Equalizer byRow={false}>
              <div style={colStyles}>
                <img src="http://placehold.it/200x300" />
              </div>
              <div style={colStyles}>
                Test content
              </div>
            </Equalizer>
          </Tab>
          <Tab eventKey={3} title="Tab 3">
            <Equalizer byRow={false}>
              <div style={colStyles}>
                <img src="http://placehold.it/200x300" />
              </div>
              <div style={colStyles}>
                Test content
              </div>
            </Equalizer>
          </Tab>
        </Tabs>
      </div>
    )
  }
}

另一种选择是使用 flexbox 来均衡高度，例如参见 [=14=]，但这取决于您需要支持的浏览器。

React 面板在未直接加载的选项卡中被压扁 - React Equalizer

React panel is squashed in tab that is not directly loaded - React Equalizer

reactjs

tabs

redux

equalizer