export class A extends Component { constructor(props) { super(props) this.state = { collapse: false, divWidth: { width: 700, } } this.toggle = this.toggle.bind(this); } toggle() { this.setState(state => ({ collapse: !state.collapse })); } render() { const data = [{ name: 'Ayaan', age: 26 }, { name: 'Ahana', age: 22 }] const columns = [{ Header: 'Name', accessor: 'name' }, { Header: 'Age', accessor: 'age' }] return ( <div> <Button onClick={this.toggle} > Click Button </Button> <Modal isOpen={this.state.collapse} modalClassName={this.state.divWidth}> <ModalHeader>Welcome</ModalHeader> <ModalBody> <div className="form-group"> <div> <ReactTable data={data} columns={columns} defaultPageSize={2} /> </div> </div> </ModalBody> </Modal> </div> ) } }
在上面的代码中,我无法增加模态的宽度(来自reactstrap),我们只能将宽度增加到500px。我在状态divWidth中添加了css属性,在其中我将宽度增加到700,但仍然无法正常工作。