小编Dar*_*ren的帖子

我正在使用react-firebase-file-uploader将头像上传到firebase存储.但是,每当我上传Portrait Orientation图像(特别是在Android和IOS设备上拍摄的图像- 它们的元数据中往往会有OrientationRotate 90 CW)时,图像会旋转90度.

我以前读过这个,我相信这些拍摄的智能手机图像总是在横向,但方向是存储EXIF元.如果我弄错了,请纠正我？

下面是使用react - firebase -file-uploader上传图像的组件示例- 我知道这个包不是问题,这个问题的解决方案可能适用于许多应用程序.

那么,我需要做什么来阅读EXIF方向,更改轮换(如果需要,或者我需要通过文件上传传递元数据？)并继续上传？

class ProfilePage extends Component {
  state = {
    avatar: "",
    isUploading: false,
    progress: 0,
    avatarURL: ""
  };

  handleProgress = progress => this.setState({ progress });
  handleUploadError = error => {
    this.setState({ isUploading: false });
    console.error(error);
  };
  handleUploadSuccess = filename => {
    this.setState({ avatar: filename, progress: 100, isUploading: false });
    firebase
      .storage()
      .ref("images")
      .child(filename)
      .getDownloadURL()
      .then(url => …

我的任务是将 ES2019 编译的 React 代码转换回 JSX。客户丢失了他们的原始文件，我举手完成了任务。不幸的是，有几百个文件，当我一个一个地转换它们时，我认为必须有一种方法可以一次编译它们到 JSX。

例如，需要转换的文件片段可能是...

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { Item } from './Item';

const Container = props => {
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    component: props.component || Item,
  }));
};

export default Container;

我想转变为...

import React from 'react';
import { Item } from './Item';

const Container = (props) => {
  return <div component={props.component || Item} />;
};

export default Container;

我知道我可以将 JSX 转换为 JS，但如何在数百个文件中反转它？

我在ReactJS和GatsbyJS(V2)项目中使用react-transition-group.

我的页面过渡使用动画,但Link退出时,exiting动画被缩短,因为下一页已准备好进入.

我已经尝试延迟Link动作,但是当页面更改被延迟时,exit动画不会被触发,直到delay结束并且Link被动作.

delay在启动exiting动画的同时,如何更改页面onClick？或者,是否有更好的方法或props可用？

这是我的代码

Layout.js

class Layout extends React.Component {
  ...
  return (
    <Transition>{children}</Transition>
  );
}

Transition.js

class Transition extends React.Component {
constructor(props) {
    super(props);
    this.state = { exiting: false };
    this.listenerHandler = this.listenerHandler.bind(this);
  }

  listenerHandler() {
    this.setState({ exiting: true });
  }

  componentDidMount() {
    window.addEventListener(historyExitingEventType, this.listenerHandler);
  }

  componentWillUnmount() {
    window.removeEventListener(historyExitingEventType, this.listenerHandler);
  }

  static getDerivedStateFromProps({ …

我正在使用 Firebase 在我们的应用程序中使用GoogleAuthProvider. 但是，如果新用户还不是经过身份验证的用户，我不希望他们登录。

如果用户存在，则将其登录并console.log('user ' + user.email + ' does exist!');。

但是，如果用户不存在。然后不允许身份验证和console.log('user ' + user.email + ' does not exist!')

var googleProvider = new firebase.auth.GoogleAuthProvider();
export const doSignInWithGoogle = () => auth.signInWithPopup(googleProvider);

googleLogin = () => {
    auth
      .doSignInWithGoogle()
      .then(result => {
        var user = result.user;
        const userRef = db.collection('users').doc(user.uid);
        userRef.get().then(docSnapshot => {
          if (docSnapshot.exists) {
            userRef.onSnapshot(() => {
              console.log('user ' + user.email + ' does exist!');
            });
          } else …

我试图addEventListener在用户scroll进入视图时使用<div id="container">.我已经通过滚动高度,但我试图这样做addEventListener的时候<div>是在窗口的顶部.

handleHeaderStuck = () => {
    if (this.innerContainer.scrollTop <= 500 && this.state.isStuck === true) {
        this.setState({isStuck: false});
    }
    else if (this.innerContainer.scrollTop >= 500 && this.state.isStuck !== true) {
        this.setState({isStuck: true});
    }
}

setState滚动时会这样500px.

如何500px在用户id="container"作为窗口顶部时替换要设置的条件？当用户到达div的底部时,也将isStuck状态替换为isStuckBottom.

完整的代码是

constructor(props) {
    super(props)
    this.state = {
      isStuck: false,
    }
    this.handleHeaderStuck = this.handleHeaderStuck.bind(this)
  }

  innerContainer = null

  componentDidMount () {
    this.innerContainer.addEventListener("scroll", this.handleHeaderStuck);
  }

  componentWillUnmount …

我收到错误Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.。

看来是因为这段代码

const LoginAuth = () => {
  navigate(routes.INDEX);
  return null;
};

删除navigate(routes.INDEX);停止错误。

代码有什么问题？我应该使用另一种方法来重定向authUser吗？任何帮助表示赞赏。

它是的一部分

import React from 'react';
import { navigate } from 'gatsby';

import AuthUserContext from './AuthUserContext';
import withAuthentication from './withAuthentication';

import Layout from './Layout';
import LoginForm from './LoginForm';    
import * as routes from '../../constants/routes';

const LoginAuth = () …

我正在寻找一种解决方案来注册路线更改并state使用setState和应用新的useEffect。下面的当前代码不会更新setState更改路线时的功能。

例如，我注册pathname的/与location.pathname === '/'内createContext，如果pathname是/所述setState的isHome被登记true，但是如果pathname是/page-1 setState被登记false。

在浏览器重新加载，onMount将state使用正确设置，但在路线改变Link这个没有。另外，请注意，我正在使用 Gatsby 并在这样做时导入{ Link } from 'gatsby'

创建上下文.js

export const GlobalProvider = ({ children, location }) => {


const prevScrollY = useRef(0);
  const [state, setState] = useState({
    isHome: location.pathname === '/',
    // other states
  });

  const …

我试图在样式组件文档中找到一个方法来创建一个循环.例如,我可以scss在样式组件中实现此循环吗？

@for $i from 0 through 20 {
  #loadingCheckCircleSVG-#{$i} {
    animation: fill-to-white 5000ms;
    animation-delay: ($i - 1.5) * 1s;
    fill: white;
    opacity: 0;
  }
}

可能吗？

CodeSandbox- https: //codesandbox.io/s/jj597mrvmw

我从外部API返回到我的GatsbyJS / ReactJS网站的某些数据有问题。

更具体地说，问题似乎是在GraphQL查询上使用gatsby-image并gatsby-plugin-sharp使用API 处理图像时出现的。...GatsbyImageSharpFluid

Errors:
  icc_transform: no input profile
  vips_colourspace: no known route from 'cmyk' to 'srgb'

exports.sourceNodes = async ({ actions, store, cache, createNodeId }) => {
  const { createNode, createNodeField } = actions;
  const { data } = await axios.get(API_URI);

  for (const event of …