Question

我做了一个简单的例子

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问题还是网格问题或引导问题？

Answer 1

这是css的Firefox问题。它与display: grid和margin有关。该错误已经报告，但仍然未经证实。 https://bugzilla.mozilla.org/show_bug.cgi?id=1427148

Firefox表问题，使用react和bootstrap

1 个答案: