在内联样式中使用状态变量答案

【问题标题】：Using State Variables in Inline Styling在内联样式中使用状态变量
【发布时间】：2017-10-08 13:36:54
【问题描述】：

我想在我的内联样式中使用状态变量：

const styles = {
progressText1: {
    fontSize: this.state.text1Size
  }
};

constructor(props, context) {
    super(props, context);
    this.state = {
      text1Size: "300%"
    };
};

...这样我就可以在调整窗口大小时重置它。我收到错误“未定义没有属性”。有谁知道怎么回事？

谢谢！

【问题讨论】：

您可能必须在渲染中定义它。
请包括您尝试使用此状态变量的整个班级和地点
目前，除了在构造函数中初始化它之外，我还没有尝试更改 text1Size ，并使用它在 progressText1 中设置 fontSize ，如上。这有帮助吗？
this.state 可能还不存在。这就是为什么它是undefined。将 const styles 移动到您的 render 函数中，它会起作用。
您使用的是类还是create 样式。需要更多信息，否则根据您发布的内容，您应该首先收到语法错误。

标签： javascript css reactjs user-interface frontend

【解决方案1】：

将const styles 移动到您的渲染函数中，就在您的return 之前

它可能看起来像这样：

render() {
  const styles = {
    progressText1: {
      fontSize: this.state.text1Size
    }
  }; 
  return (
    <div style={styles.progressText1}></div>
  )  
}

【讨论】：

哦，我没有意识到你之前有它工作过（@A. Lau 在上面的评论对话中提到，很长，所以我一开始看不到它）。但是，我只是想帮忙！