代码之家 › 专栏 › 技术社区 › Guillaume

react中的动态样式

jsx styles reactjs javascript

Guillaume · 技术社区 · 6 年前

在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;

谢谢你的帮助

2 回复 | 直到 6 年前

cfraser 6 年前

在您的示例中,将状态保持在 Column 就这样给你留下了。每个 柱 可以处理自己的风格。

你应该 向上移动 将一个组件状态为 Home ,然后继续 家 的状态中,哪些列应该更宽。

在中可以有这样的函数 家 :

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

然后,将该函数作为道具传递给列

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

然后,在列组件中,使用其id调用该函数:

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

那样的话,回到我们的 家 render方法,则必须检查状态。

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

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

Suppen 6 年前

首先 Home 组件应该是跟踪哪个列是活动(“大”)列的组件。将其置于 家 .

那么你已经有了 resizeColumn() 方法 家 ,您可以将其作为道具正确传递给列组件,以便列可以在单击时调用它。他们需要通过函数调用发送一些标识自己的信息 家 知道单击了哪个。该方法更新 家 所以它知道哪个列应该处于活动状态。

最后 家 必须告诉列哪个是大的,这样他们才能正确地呈现自己。我注意到类名非常像引导程序。您可以给大列命名为 col-lg-6 ,而其他人 col-lg-2 或者别的什么

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

PS:React中的方法在用作事件侦听器时有失去上下文的趋势,这意味着使用 this 在他们内部是行不通的。使用前需要将其捆扎好。示例说明 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"
  />