我有一个进度栏组件,我在其中使用动画来移动进度栏。 我正在使用Material UI类来对组件进行样式设置,并且正在其他组件之一中使用该组件(将道具传递给progressbar组件)。 我可以在我的render方法下获取道具,但无法访问类声明上方的道具。 有想法吗? 抱歉,如果这是一个愚蠢的问题,我在React World中只有1周大。 提前致谢

  1. 进度条
import { withStyles } from "@material-ui/core/styles";
import { connect } from "react-redux";

const styles = theme => ({
  stat: {
    width: `100%`
  },
  "@keyframes moveTranslateX": {
    from: { transform: `translateX(0px)` },
    to: { transform: `translateX(78.1875px)` }
  },
  "@keyframes scaleX": {
    from: { transform: `scale(0, 1)` },
    to: { transform: `scale(1, 1)` }
  },
  StatVal: {
    position: "absolute",
    top: "0.125rem",
    height: "0.1875rem",
    backgroundColor: "#FFA400",
    zIndex: 2,
    transformOrigin: "0 50%",
    animationName: "scaleX",
    animationDuration: "1.5s"
  },
  StatValBall: {
    position: "absolute",
    display: "inline-block",
    height: "0.4375rem",
    width: "0.4375rem",
    borderRadius: "0.21875rem",
    backgroundColor: "#FFA400",
    zIndex: 2
  },
});

class Progressbar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { classes, val } = this.props;
    const barWith = parseInt(this.props.val * 100, 10);

    const width = { width: `${barWith}%` };
    const statValBalStyles = {
      // left: `${barWith}%`,
      animationName: "moveTranslateX",
      animationDuration: "1.5s",
      animationFillMode: "forwards"
    };

    return (
      <div>
        <div>
          <div className={classes.StatVal} style={width} />
          <div className={classes.StatValBall} style={statValBalStyles} />
        </div>
      </div>
    );
  }
}

export default connect()(withStyles(styles)(Progressbar));
  1. 父组件
<Progressbar val={item.value.toFixed(2)}></Progressbar>

我需要实现的是以某种方式使moveTranslateX关键帧成为动态值或props值。 我无法将道具传递给moveTranslateX。 有想法吗?

#1楼 票数:0

您可以像这样访问传递给更高阶组件( withStyles )的道具:

const styles = ()=>({
  root:{
    backgroundColor: props=>props.color
  }
})

这是一个简单的工作示例

编辑材料演示

  ask by smokiehero translate from so

未解决问题?本站智能推荐:

1回复

如何将道具传递给父对象(Material-UIReact)

因此,我到处都在寻找解决方案,但是没有运气。 我试图将父React组件的this.state.nextID作为属性this.state.nextID给子组件。 但是,当我尝试访问子级中的该属性时,该属性为null。 我正在使用Material-UI进行反应,我认为问题出在withStyl
1回复

如何将数组传递给Material-UIDataSource道具

我正在使用material-ui作为组件。 material-ui中有一个自动完成组件,我想使用它来显示带有图标的图标名称列表。 如果我仅将MenuItem传递给dataSource,则会得到一个没有列表的空输入框。 如果我尝试像在代码中那样传递键和值,则会收到意外的令牌错误。 这是我
1回复

如何将props传递给Material-ui样式的组件?

我也有一个我也想传递道具的组件,但是这个组件也有内部道具来处理样式,我不确定如何同时处理两者。 这就是我目前所拥有的。 const styles = theme => ({ // Theme building});const LoginLink = React.forwardRe
1回复

React和Material-Ui在.js中定义类,并将其作为字符串传递给组件

我正在尝试在.js文件中定义一个类,因此我可以利用material-uis主题对象,并将其作为字符串传递给组件,因为components prop只接受字符串。 React-Dropzone导入仅接受字符串作为参数,而不接受类对象。 codesandbox: https://codes
1回复

如何将函数作为道具传递给React的Material-UI组件?

我想制作一个包含SearchBar的Appbar 。 为此,我将Material-UI用于React 。 我的组件部分中有一个加载Appbar 的文件这是appbar.js 之后,我将此文件导入到另一个名为searchbar.js文件中。 为什么我这样做? 好吧,这样我就可以用组件状态和道具来控制输
2回复

将onClick传递给material-ui按钮-仅工作一次

我正在尝试将 material-ui 按钮包装到另一个组件中。 除非我尝试处理 onClick 事件,否则一切正常。 似乎它只工作一次。 (不)工作示例可在以下位置获得:https://codesandbox.io/embed/material-demo-nn0ut?fontsize=14 源代码
2回复

如何将道具传递给一个React类到另一个React类?

当在输入字段中输入文本时,我试图在模式中启用一个按钮。 但是我的表单是在另一个类中构建的,并在父类中使用。 如何将onChange方法传递给我的表单组件。 这是我的父组件: import React from 'react'; import { Button, Dialog, DialogA
1回复

Reactjs-将API数据作为自动完成组件(Material-UI)的道具传递

我是 Reactjs 的初学者。 我正在尝试实现 material-ui 提供的自动完成组件。 我想将 API 链接作为道具传递给元素。 但是如何将 json 标签名称作为要在“getOptionLabel”中使用的道具传递? 例如,如果我们考虑这个返回电视节目名称的API 链接,我们需要使用 SH