小编ipe*_*n67的帖子

我已经使用 react-datepicker 库设置了一个 DatePicker 组件，并将使用今天的日期以 MM-DD-YYYY 格式传递给它一个初始日期值。

但是，当我在 React 中加载页面时，我得到

范围错误：无效的时间值

const AuthForm = ({ buttonText, formType, onAuth, history, ...props }) => {

  const startDate = new Date().toLocaleDateString();

  const initialStateSignup = {
      email : "",
      password : "",
      firstName: "",
      lastName: "",
      gender: "",
      dob: startDate
  };
    const [state , setState] = useState(formType === 'login' ? initialStateLogin : initialStateSignup);

  const handleChange = e => {
      const {name , value} = e.target;
      setState( prevState => ({
          ...prevState,
          [name] : value
      })) …

当鼠标悬停在组件上时，我很难让 Material UI 工具提示真正出现。据我所知，我正在做工具提示组件的最简单实现：我直接导入它（没有自定义样式或其他任何东西），然后我将它包裹在另一个组件周围，该组件在顶层展开其道具。

从阅读文档来看，它应该是那么简单，但它并没有出现在悬停时，并且在 React DevTools 中，我看到 anchorEl 属性是未定义的。

import Tooltip from '@material-ui/core/Tooltip';

const containerComponent = () => (
    <Tooltip text="Planner"><PlannerIcon /></Tooltip>
)

规划器图标.js

const PlannerIcon = (props) => (
  <Icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"
    {...props}
  >
    <path d="M14.71,3.11V14.88H2.94V3.11H14.71m1-1H1.94V15.88H15.71V2.11Z"/>
    <line x1="1.94" y1="9" x2="15.71" y2="9" strokeMiterlimit="10"/>
    <line x1="8.83" y1="2.12" x2="8.83" y2="15.77" strokeMiterlimit="10"/>
  </Icon>
  );

我正在通过与 Github 的自动部署集成将一个非常基本的前端 React 应用程序（本质上是一个静态站点）部署到 Heroku。我以前用一个更复杂的应用程序做过这个，没有问题。但是现在我在部署时在我的日志中得到以下输出：

2020-05-02T11:18:53.190530+00:00 app[web.1]: [34m?[39m [90m?wds?[39m: webpack 输出来自

2020-05-02T11:18:53.190635+00:00 app[web.1]: [34m?[39m [90m?wds?[39m: 不是来自 webpack 的内容来自 /app/public

2020-05-02T11:18:53.190727+00:00 app[web.1]: [34m?[39m [90m?wds?[39m: 404s 将回退到 /

2020-05-02T11:18:53.190910+00:00 app[web.1]：启动开发服务器...

2020-05-02T11:18:53.190912+00:00 应用程序[web.1]：

2020-05-02T11:18:53.287654+00:00 heroku[web.1]：状态从开始变为崩溃

当我第一次得到这个时，这个陈述是准确的。我有一些我正在加载的图像src='/image.jpg'。但是我将我在应用程序中实际使用的所有资产移到了 src/images 中，并且现在将它们作为组件导入。我已经检查了 src 目录中的每个文件四次，并且不再有对 public 目录中文件的任何引用。

我没有做过任何自定义的 Webpack 配置，都是默认的 CRA。那么为什么它仍然会抛出这个错误，我该如何解决呢？

项目层次：

??? src
?   ??? index.js
?   ??? app.js (etc)
?   ??? images (this is where I am importing any images into my components now)
??? public
?   ??? index.html
?   ??? favicon.jpg
? …

我在我的应用程序中使用 Material UI 按钮（在样式组件中进行自定义）。以前，通过将 size="small" 属性传递给按钮，按钮仅占用按钮文本的宽度，加上我定义的一些填充。即使放置在我创建的 Flexbox 容器中也是如此。但是，当我为 FlexContainer 组件定义宽度时，小按钮增加到该容器宽度的 100%。

我不想在按钮上定义默认宽度，因为它应该根据按钮文本适当调整大小。我尝试在按钮本身上设置“display: inline-flex”，但这没有任何作用。

这是容器组件（较大组件的片段）：

       <RightFields flexDirection="column">
          <FieldSpacing>
            <PasswordDisplay />
          </FieldSpacing>
          <FieldSpacing>
            <PaymentDisplay />
          </FieldSpacing>
          <Button pink
            buttonText="Save Changes"
            buttonSize="small"
          />
        </RightFields>


...

const RightFields = styled(FlexContainer)`
  width: 321px;
`

按钮.js

const Button = ({buttonText, buttonSize, ...props}) => {

  return (
    <>
      {buttonSize === 'large' ?
        <LargeButton
          variant="contained"
          fullWidth={true}
          size="large"
          {...props}
        >
          {buttonText}
        </LargeButton> :
        <SmallButton
          variant="contained"
          size="small"
          {...props}
        >
          {buttonText}
        </SmallButton>
      }
    </>
  )

}

const StyledButton = styled(MaterialButton)`
  ... …

我花了很多时间阅读 React Hooks，虽然它的功能看起来比使用具有本地状态和生命周期方法的类更直观、可读和简洁，但我一直在阅读有关 Hooks 替代 HOCs 的参考资料。

我在 React 应用程序中使用的主要 HOC 是 withAuth —— 基本上是一个检查 currentUser（存储在 Redux 状态）是否经过身份验证的函数，如果是，则呈现包装的组件。

这是一个实现：

import React, { Component } from "react";
import { connect } from "react-redux";

export default function withAuth(ComponentToBeRendered) {
  class Authenticate extends Component {
    componentWillMount() {
      if (this.props.isAuthenticated === false) {
        this.props.history.push("/signin");
      }
    }
    componentWillUpdate(nextProps) {
      if (nextProps.isAuthenticated === false) {
        this.props.history.push("/signin");
      }
    }
    render() {
      return <ComponentToBeRendered {...this.props} />;
    }
  }

  function mapStateToProps(state) {
    return { isAuthenticated: state.currentUser.isAuthenticated };
  }

  return …

无论我尝试什么，我似乎都无法获得 Material-UI Select 组件的真正占位符功能。使用占位符道具<Select />不起作用，看起来它要么没有将该道具传递给输入，要么没有以某种方式显示它。

通读 Select 组件的 Material-UI 演示代码，它们似乎通过使用<InputLabel />. 他们有这个厚脸皮的小动画，可以将它移动到输入的左上角。不错不错，效果不错 但它不符合我们网站的设计，我想禁用它。不幸的是，disableAnimation道具只会使标签跳到左上角，而不是完全消失。

我想要的是我的下拉组件将“选择项目”作为占位符文本说出来，然后当菜单打开时，该文本应该消失。它仅在用户单击下拉列表而不选择任何内容时返回。如果他们选择一个值，该值应替换占位符，并且“选择项目”不应出现在任何地方。

（注意：我在使用 react-select 时工作正常，但我需要使用 Material-UI 的涟漪效应，所以我尝试用 Material UI 覆盖它们的 MenuList 和 MenuItem 组件，但它将所有道具传递给 DOM 元素和抛出了一堆错误。所以我回到绘图板并决定使用整个 Material UI Select 组件。）

当前代码：

const Dropdown = ({options, ...props}) => {
  const [selected, setSelected] = useState('');

  const testOptions = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

  const handleChange = (selected) => { …