对状态变化作出反应，改变风格

Question

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

我想达到的目标：我想用 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;

我尝试了什么：

检查渲染 -> 没用，因为我无法达到状态 + 在状态渲染之前有填充组件
检查 ComponentDidMount -> 不工作不知道为什么
有一个 onChange -> 无法调用该函数得到一个错误，因为我陷入了无限循环

如果您对如何处理这个问题有好的想法，那就太棒了。我哪儿也去不了

Answer 1

如果你只是担心填充，那么你可以做类似的事情。

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;

如果您还想要其他东西，请告诉我。

对状态变化作出反应，改变风格

React On State Change, Change style

state

setstate

reactjs