Question

在反应中，在我的主页中，我有四列。我需要独立改变他们的尺寸。当我在四列中的一列上进行clic时，我可以改变它的大小，但我不知道如何在同一时间改变其他列的大小。目的是使点击的列具有较大的尺寸，而另外三列具有较小的尺寸。但我不知道。

我的代码：

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。

状态

然后您已经拥有resizeColumn() Home方法，您正确地将其作为道具传递给列组件，因此列可以在单击时调用它。他们需要通过函数调用发送一些标识自己的东西，因此Home知道点击了哪一个。该方法更新Home的状态，以便它知道哪个列应该是活动的。

最后，Home必须告诉列哪一个是大的，所以他们可以正确渲染自己。我观察到类名很漂亮。您可以为大列指定col-lg-6的类名，而其他列则为col-lg-2或其他内容

究竟如何做到这一点留给读者练习。希望这有帮助

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

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"
  />

反应中的动态风格

2 个答案: