时间戳

首页 > 解决方案 > 对状态变化做出反应，改变风格

reactjs - 对状态变化做出反应，改变风格

问题描述

我真的很难过，现在已经尝试了一个星期尝试了各种各样的东西，但无法让它发挥作用。我真的在互联网上找不到任何东西，所以请帮助我，即使这可能是一个特定的问题

我想要实现的目标：我想用 Pending 来“补偿” text1 或 text2 的空行。这些行有时是空的，有时是文本。它们在不同组件中的上传时发生变化。因此，如果 text1 为空，我想将 1 添加到 this.state.count

我为什么要这样做我想打印一本手册，格式非常重要。通常周围有更多代码，但我将其删除以使其更容易理解

import React, { Component } from "react";
import axios from "axios";


class BspComponent extends React.Component {

constructor(props) {
super(props);

this.state = {
  karte: [],
  text1: "",
  text2: "",
  count: 0,
};
}

componentDidMount() {

axios
  .get("http://test.com")
  .then((response) => {
    this.setState({
      karte: response.data,
      text1: response.data.z1,
      text2: response.data.z2,
    });
    
  })
  .catch((error) => {
    console.log(error);
  });
}


render() {
return (
  <div>
   <div
      className="atDistance" /** This Componant should get a padding is text1 is empty */
      style={{
        paddingTop: `${this.state.count}cm`,
      }}
    >
      BLA BLA
    </div>
    <div className="wrapper" /** text1 and 2 change on an Upload in a difrent Component */>
      <p>{this.state.text1}</p>  
      <p>{this.state.text2}</p>
    </div>
    <div
      className="atDistance" /** This Componant should get a padding is text1 is empty */
      style={{
        paddingTop: `${this.state.count}cm`,
      }}
    >
      BLA BLA
    </div>
  </div>
 );
 }
}

export default BspComponent;

我试过的：

  1. 签入渲染 - >没有工作，因为我无法达到状态+在状态渲染之前有填充组件

  2. 签入 ComponentDidMount -> 没用 不知道为什么

  3. 使用 onChange -> 无法调用该函数时出现错误，因为我陷入了无限循环

如果您有一个好主意如何处理这个问题，那就太酷了。我无处可去

标签： reactjsstatesetstate

解决方案

如果您只是担心有填充，那么您可以执行类似的操作。

paddingTop: `${this.state.text ? 1 : 0 }cm`,

并将其应用于您的元素。

import React, { Component } from "react";
import axios from "axios";


class BspComponent extends React.Component {

constructor(props) {
super(props);

this.state = {
  karte: [],
  text1: "",
  text2: "",
  count: 0,
};
}

componentDidMount() {
axios
  .get("http://test.com")
  .then((response) => {
    this.setState({
      karte: response.data,
      text1: response.data.z1,
      text2: response.data.z2,
    });
    
  })
  .catch((error) => {
    console.log(error);
  });
}


render() {
return (
  <div>
   <div
      className="atDistance" /** This Componant should get a padding is text1 is empty */
      style={{
        paddingTop: `${this.state.text ? 1 : 0 }cm`,
      }}
    >
      BLA BLA
    </div>
    <div className="wrapper" /** text1 and 2 change on an Upload in a difrent Component */>
      <p>{this.state.text1}</p>  
      <p>{this.state.text2}</p>
    </div>
    <div
      className="atDistance" /** This Componant should get a padding is text1 is empty */
      style={{
        paddingTop: `${this.state.text ? 1 : 0 }cm`,
      }}
    >
      BLA BLA
    </div>
  </div>
 );
 }
}

export default BspComponent;

如果您想在收到空文本时将计数增加 1，那么您可以这样做。

import React, { Component } from "react";
import axios from "axios";


class BspComponent extends React.Component {

constructor(props) {
super(props);

this.state = {
  karte: [],
  text1: "",
  text2: "",
  count: 0,
};
}

componentDidMount() {
const { count } = this.state;
axios
  .get("http://test.com")
  .then((response) => {
    this.setState({
      karte: response.data,
      text1: response.data.z1,
      text2: response.data.z2,
      count: response.data.z1 ? count + 1 : count;
    });
    
  })
  .catch((error) => {
    console.log(error);
  });
}


render() {
return (
  <div>
   <div
      className="atDistance" /** This Componant should get a padding is text1 is empty */
      style={{
        paddingTop: `${this.state.count}cm`,
      }}
    >
      BLA BLA
    </div>
    <div className="wrapper" /** text1 and 2 change on an Upload in a difrent Component */>
      <p>{this.state.text1}</p>  
      <p>{this.state.text2}</p>
    </div>
    <div
      className="atDistance" /** This Componant should get a padding is text1 is empty */
      style={{
        paddingTop: `${this.state.count}cm`,
      }}
    >
      BLA BLA
    </div>
  </div>
 );
 }
}

export default BspComponent;

如果你想要别的东西，请告诉我。

推荐阅读