Firefox表问题，使用反应和引导(Firefox table issue, use react and bootstrap)

Firefox表问题，使用反应和引导(Firefox table issue, use react and bootstrap)

我举了一个简单的例子

JSFiddle ←点击这里

JSX

class Test extends React.Component { constructor(props) { super(props); this.state = { isDropdownNow: false }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isDropdownNow: !prevState.isDropdownNow })); } render() { if (!this.props.data) { return null; } let _this = this; let keyData = this.props.data.filter(x => x > 5); let filteredData = this.state.isDropdownNow ? this.props.data : keyData; const rowList = filteredData.map(function (element, i) { return <tr key={i}><td>{element}</td></tr>; }); let buttonText = this.state.isDropdownNow ? 'Show Less' : 'Show More'; let dropDownButton = ( <tr style={{ height: '45px' }}> <td colSpan='2'> <button type="button" className="btn btn-link" style={{ width: '100%', fontWeight: 'bold' }} onClick={this.handleClick}>{buttonText}</button> </td> </tr> ); return <div ref='root'> <div className='osce-body-row'> <table className='table tableTest'> <tbody> {rowList} {dropDownButton} </tbody> </table> </div> </div>; } } ReactDOM.render(<Test data={[1,2,3,4,5,6,7,8,9,10]} />, document.querySelector("#root"))

这在Chrome中正常工作，并且添加-ms-grid在IE中按预期工作

在Firefox中显示更多按钮将永远增加高度，我不明白。 这是一个React问题还是一个网格问题或引导问题？

I made an simple example

JSFiddle ←Click here

jsx

class Test extends React.Component { constructor(props) { super(props); this.state = { isDropdownNow: false }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isDropdownNow: !prevState.isDropdownNow })); } render() { if (!this.props.data) { return null; } let _this = this; let keyData = this.props.data.filter(x => x > 5); let filteredData = this.state.isDropdownNow ? this.props.data : keyData; const rowList = filteredData.map(function (element, i) { return <tr key={i}><td>{element}</td></tr>; }); let buttonText = this.state.isDropdownNow ? 'Show Less' : 'Show More'; let dropDownButton = ( <tr style={{ height: '45px' }}> <td colSpan='2'> <button type="button" className="btn btn-link" style={{ width: '100%', fontWeight: 'bold' }} onClick={this.handleClick}>{buttonText}</button> </td> </tr> ); return <div ref='root'> <div className='osce-body-row'> <table className='table tableTest'> <tbody> {rowList} {dropDownButton} </tbody> </table> </div> </div>; } } ReactDOM.render(<Test data={[1,2,3,4,5,6,7,8,9,10]} />, document.querySelector("#root"))

This works fine in Chrome and adding -ms-grid works as expected in IE

In Firefox press show more button will always increase the height, I don't understand. Is this a React issue or a grid issue or a bootstrap issue?

最满意答案

这是一个与CSS的Firefox问题。 它与display: grid和margin 。 该错误已经被报告，但仍未得到证实。 https://bugzilla.mozilla.org/show_bug.cgi?id=1427148

This is a Firefox problem with css. It has something to do with display: grid and margin. The bug is already reported, but still unconfirmed. https://bugzilla.mozilla.org/show_bug.cgi?id=1427148