小编Maa*_*eeb的帖子

我仍然是React的菜鸟,在互联网上的许多例子中,我看到渲染子元素的这种变化让我感到困惑.通常我看到这个:

class Users extends React.Component {
  render() {
    return (
      <div>
        <h2>Users</h2>
        {this.props.children}
      </div>
    )
  }
}

但后来我看到一个这样的例子:

<ReactCSSTransitionGroup
     component="div"
     transitionName="example"
     transitionEnterTimeout={500}
     transitionLeaveTimeout={500}
     >
     {React.cloneElement(this.props.children, {
       key: this.props.location.pathname
      })}
</ReactCSSTransitionGroup>

现在我理解了api,但是当我应该使用它时,文档并没有完全清楚.

那么另一个人做不了什么呢？有人能用更好的例子向我解释这个吗？

我写了一个高阶组件:

import React from 'react';


const NewHOC = (PassedComponent) => {
    return class extends React.Component {
        render(){
            return (
                <div>
                    <PassedComponent {...this.props}/>
                </div>
            )
        }
    }
}

export default NewHOC;

我在我的App.js中使用上面的内容:

import React from 'react';
import Movie from './movie/Movie';
import MyHOC from './hoc/MyHOC';
import NewHOC from './hoc/NewHOC';
export default class App extends React.Component {
  render() {
   return (
    <div>
     Hello From React!!
     <NewHOC>
        <Movie name="Blade Runner"></Movie>
     </NewHOC>
    </div>
   );
  }
 }

但是,我得到的警告是:

警告:函数作为React子函数无效.如果返回Component而不是render,则可能会发生这种情况.或许你打算调用这个函数而不是返回它.在App中由div(由App创建)中的NewHOC(由App创建)

Movie.js文件是:

import React from "react";

export default …

我很清楚在 React 中创建动态子项时需要添加一个prop的原因key。令我感兴趣的是以下两段代码的行为

这children仅使用Array#map 进行迭代

const App = () => {
  return (
    <Parent>
      <span>Child 1</span>
      <span>Child 2</span>
      <span>Child 3</span>
    </Parent>
  );
};

const Parent = ({ children }) => {
  return children.map(child => (
    <div style={{ background: "lightblue" }}>{child}</div>
  ));
};
ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<div id="app">

这用于React.Children.map做同样的事情

const App = () => {
  return (
    <Parent>
      <span>Child 1</span>
      <span>Child 2</span>
      <span>Child 3</span>
    </Parent>
  );
};

const …

我在流星应用程序部署meteor时遇到问题.我在这里遵循了这个教程.我也尝试使用ZEIT的 OSX Client进行部署,但它总是会抛出同样的错误.
有没有人知道解决方法？

编辑1:这是我的package.json

 {
  "name": "helloworld",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.26.0",
    "meteor-node-stubs": "^0.3.2"
  }
}

我们的部署过程使用 Jenkins，但有时我们的构建会失败并显示以下内容

我们使用的是npm 版本：6.7.0。任何帮助将不胜感激！

我想解决一个诺言，这反过来又使一个ajax调用。无论ajax调用是否成功，都应解决诺言。我尝试了以下代码段：

new Promise(function(resolve, reject) {
  $.ajax({
    url: "nonExistentURL",
    headers: {
      "Content-Language": "en"
    },
    async: true,
    type: "DELETE",
    contentType: "application/json",
    crossDomain: true,
    dataType: "json"
  }).done(function(oSuccessData) {
    debugger;
    resolve(oSuccessData);
  }).fail(function(oData) {
    debugger;
    resolve(oData);
  });
}).then(function(oData) {
  debugger;
}).catch(function(err) {
  debugger;
});

但是，这似乎总是在进入catch回调。为什么不进入then回调？

任何人都可以解释一下反应 useEffect 钩子是如何工作的ComponentWillUnmount。另外如何使用 firebase 处理加载状态onAuthStateChanged？

const [loading, setLoading] = useState(false);

useEffect(() => {
  const auth = getAuth();
  const unsubscribe = onAuthStateChanged(auth, (user) => {
    setCurrentUser(user);
    setLoading(true);
  });
  return unsubscribe;
}, []);