反应中的动态风格答案

【问题标题】：Dynamic style in react反应中的动态风格
【发布时间】：2018-07-09 21:13:09
【问题描述】：

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

我的代码：

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;

感谢您的帮助

【问题讨论】：

标签： javascript reactjs styles jsx

【解决方案1】：

在您的示例中，将状态保留在每个 Column 中只会让您这样做。每个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 设置宽样式或不设置

【讨论】：

【解决方案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"
  />

【讨论】：