反应中的动态风格

Question

在我的主页上，我有四列。我需要独立更改它们的大小。当我在四列中的一列上时，我可以更改他的大小，但我不知道如何同时更改其他列的大小。目的是以大尺寸呈现单击的列，以小尺寸呈现其他三列。但我不知道。

我的代码 ：

import React, { Component } from 'react';
import Column from '../components/Column';
import PropTypes from 'prop-types';
class Home extends Component {
constructor(props) {
super(props);
}
resizeColumn() {
alert('ok');
}
render() {
return (
<div className="container home-menu flex row between">
<Column parentOnClick={ this.resizeColumn } text={ 'React' } key={ 'Column 1' }/>
<Column parentOnClick={ this.resizeColumn } text={ 'For' } key={ 'Column 2' }/>
<Column parentOnClick={ this.resizeColumn } text={ 'The' } key={ 'Column 3' }/>
<Column parentOnClick={ this.resizeColumn } text={ 'Win' } key={ 'Column 4' }/>
</div>
);
} 
}
export default Home;

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Column extends Component {
constructor(props) {
super(props);
this.state = {
columnDimension: ''
}
}
resizeColumn() {
this.style = {flex: 20};
this.setState({columnDimension: 20});
}
render() {
return (
<div onClick={ (e) => this.resizeColumn(e)} style={{flex: this.state.columnDimension}}>
</div>
);
} 
}
export default Column;

谢谢你的帮助

Answer 1

在您的示例中，将状态保留在每个Column中将只剩下这一点。每个Column都可以处理自己的风格。

你应该将状态上移一个分量来Home，并保持Home的状态，哪一列应该更宽。

你可以在Home中有一个这样的函数：

resizeColumn(columnId) {
this.setState({ wideColumn: columnId })
}

然后，将该函数作为 prop 传递给列

<Column onClick={this.resizeColumn} text="React" />

然后，在列组件中，使用其 id 调用该函数：

<div onClick={() => {this.props.onClick(this.props.text)}} />

这样，回到我们的Home渲染方法，你必须检查状态。

<Column onClick={this.resizeColumn} text="React" wide={this.state.columnId === 'React'} />

然后您可以使用wide道具为每个Column设置或不设置宽样式

Answer 2

首先，Home组件应该是跟踪哪一列是活动("大")列的组件。把它放在Home的状态。

然后你已经有了Home的resizeColumn()方法，您可以将其作为 prop 正确传递给列组件，以便列可以在单击时调用它。他们需要发送一些通过函数调用来标识自己的内容，这样Home就知道点击了哪一个。该方法更新Home的状态，以便知道哪一列应处于活动状态。

最后，Home必须告诉列哪个是大列，以便它们可以正确呈现自己。我观察到类名非常像引导程序。你可以给大列一个类名col-lg-6，而其他列则得到col-lg-2或其他东西

具体如何做到这一点留给读者作为练习。希望这有帮助

PS：React 中的方法在用作事件侦听器时往往会丢失上下文，这意味着在其中使用this将不起作用。您需要在使用前绑定它们。Home类的constructor示例：

constructor(props) {
super(props);
// Set initial state
this.state = {
bigCol: 1
};
// Bind methods
this.resizeColumn = this.resizeColumn.bind(this);
}

然后是有关如何创建Column组件的示例：

<Column
key="1"
className={this.state.bigCol === 1 ? "col-lg-6" : "col-lg-2"}
onClick={this.resizeColumn.bind(this, 1)}
text="React"
/>