javascript - React 中的动态风格

Question

在 React 中，我的主页有四栏。我需要独立改变它们的大小。当我单击四列之一时，我可以更改其大小，但我不知道如何同时更改其他列的大小。目的是将单击的列渲染为大尺寸，将其他三列渲染为小尺寸。但我不知道。

我的代码:

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都可以处理自己的样式。

您应该将状态一个组件上移到Home，并保持Home的状态，哪一列是应该更宽。

您可以在Home中拥有这样的功能:

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

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

<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 设置宽样式或不设置