Проблема с таблицей Firefox, использование реакции и начальной загрузки - PullRequest
Новая
       7

Проблема с таблицей Firefox, использование реакции и начальной загрузки

0 голосов
/ 26 апреля 2018

Я сделал простой пример

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, проблема с сеткой или проблема с начальной загрузкой?

1 Ответ

0 голосов
/ 26 апреля 2018

Это проблема Firefox с CSS. Это как-то связано с display: grid и margin. Ошибка уже сообщена, но все еще не подтверждена. https://bugzilla.mozilla.org/show_bug.cgi?id=1427148

...