小编Pau*_*000的帖子

我知道你可以将所有的反应组件道具传递给它的子组件,如下所示:

const ParentComponent = () => (
   <div>
     <h1>Parent Component</h1>
     <ChildComponent {...this.props} />
   </div>
)

但是,如果子组件是无状态的,那么如何检索这些道具呢？我知道如果它是一个类组件,你可以只访问它们this.prop.whatever,但是你将什么作为参数传递给无状态组件？

const ChildComponent = ({ *what goes here?* }) => (
   <div>
      <h1>Child Component</h1>
   </div>
)

我已按照facebook说明页面(https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html)的说明安装了create-react-app :

首先,安装全局包:

npm install -g create-react-app

我这样做了 它似乎工作正常 - 文件已安装到

users/*name*/.node_modules_global/lib/node_modules/create-react-app

我不确定为什么全局安装会把它带到这条路上,但是你有它.

下一条指令:

现在您可以使用它来创建新的应用程序:

create-react-app hello-world

不能简单,对吧？但终端向我吐出这个:

-bash: create-react-app: command not found

这可能很简单,我很遗憾,但我真的不知道在哪里看.如果有人可以提供帮助,我真的很感激!

提前致谢.

注意:我使用的是Node v6.3.1和npm v3.10.3

我有一个带有create-react-app的小型React应用程序,它在运行后从本地服务器运行良好npm start.好到目前为止.

但是,当我运行时npm run build,该过程似乎正确执行(创建构建文件夹,其中包含捆绑的js文件和index.html文件),但是当我在浏览器中打开index.html时它什么也没有呈现.我错过了什么？

旁白:我也尝试将其上传到远程服务器,当我转到URL时,浏览器又回来了......

禁止访问:您无权访问此服务器上的/.

...如果有人知道如何解决这个问题,我也会很感激.

我有一个ng-repeat,它遍历模型中各国的名称.在某些国家/地区名称上,我希望缩写它们以缩短字符串的长度,例如,我希望"北爱尔兰"输出为"N".爱尔兰'.

JSON模型

[
  {
    "id": 1,
    "name": "Italy",
  },

  {
    "id": 2,
    "name": "Northern Ireland",
  },

  {
    "id": 3,
    "name": "Poland",
  }
]

我可以在我的模型中更改名称,但我宁愿保留它,因为我希望原始数据完整.只有在这个特定的例子中我才想要缩写它.

我应该使用ng-repeat过滤器吗？如果是这样,怎么样？
如果没有,还有其他建议吗？

HTML

<md-grid-tile ng-repeat="nation in nationData">

  <img src="img/{{nation.name}}.png">

  <md-grid-tile-footer>
    <h3>{{nation.name | uppercase}}</h3>
  </md-grid-tile-footer>

</md-grid-tile>

在React(ES6)中,为什么我有时会看到这个？...

class Hello extends React.Component { ... }

有时这个？

export class Hello extends React.Component { ... }

export关键字有什么意义？如果使用webpack,这是否需要对webpack.config.js文件进行任何更改？

任何关于此的信息将不胜感激,提前感谢.

更新:

主file.js

import React from 'react';
import ReactDOM from 'react-dom';

import { External } from './external';

class Hello extends React.Component {
  render() {
    return <div>

      <h1>Hello World (Main File this time)</h1>
      <External />

    </div>
  }
}

ReactDOM.render(<Hello/>, document.getElementById('main'));

external.js(同一目录)

export class External extends React.Component {
  render() {
    return <div>This is my external component</div>
  }
} …

只是在React中第一次尝试Promise.我有一个基本的承诺工作(从其他人的代码中撕掉),但不知道如何使其适应有用.

到目前为止我所拥有的(在我的render()职能范围内)

  var promise = new Promise( (resolve, reject) => {

     let name = 'Dave'

     if (name === 'Dave') {
        resolve("Promise resolved successfully");
     }
     else {
        reject(Error("Promise rejected"));
     }
  });

  promise.then(function(result) {
     console.log(result); // "Promise resolved successfully"
  }, err => {
     console.log(err); // Error: "Promise rejected"
  });

果然,因为promise条件匹配(name === 'Dave'),我的控制台会记录Promise resolved successfully.

但是,我不知道在使用promise时如何为变量赋值.例如:

  promise.then(function(result) {
     var newName = 'Bob'
  }, function(err) {
     var newName = 'Anonymous'
  });

然后当我尝试在render()'s return语句中返回此值时,如下所示:

<h2>{newName}</h2>

它说newName未定义.

我也尝试过: …

如果这重复的话，我们深表歉意，但很多其他线程已经有很多年了。

我想永久更新我的 $PATH 变量，这样它就不会在每次退出终端时重置。我看到人们建议运行以下命令：

gedit ~/.bashrc

但这返回：

-bash: gedit: command not found

我已经使用 Spotlight 在我的硬盘上搜索该.bashrc文件，但找不到它。有人可以帮忙吗？

提前致谢...

我已经创建了一个适合我的Webpack构建 - 它有一个用于热重新加载的开发服务器,以及一个运行模板html文件并集成该bundle.js文件的生产快速服务器.

这一切都很棒,除非我在我的开发服务器上工作,控制台给我这样的错误消息:

Uncaught Error: Expected the reducer to be a function.(…) bundle.js:36329

它引用bundle.js了错误的来源,而不是我正在使用的组件,这使得很难找到错误的来源.

我知道,只要控制台知道它是bundle.js包含错误的文件,但我怎样才能让控制台记录预捆绑代码？(例如Component.js)

提前致谢.

运行 gulp 任务时，出现以下错误：

SyntaxError in plugin "gulp-babel"
Message:
    /Users/******/Repos/******/src/scripts/config/index.js: Unexpected export specifier type
> 1 | export * as constants from './constants';
             ^^^^^^^^^^^^^^

我不知道为什么这是因为我正在运行所需的插件以允许 ES6 导入/导出，或者我想......

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "add-module-exports",
        "@babel/plugin-transform-modules-commonjs",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-export-default-from"
    ]
}

package.json - 我已经包含了完整列表，其中大部分可能无关紧要，但以防万一有任何已知的包冲突。

"dependencies": {
    "@babel/polyfill": "^7.8.3",
    "classnames": "^2.2.5",
    "concurrent-transform": "^1.0.0",
    "deep-freeze": "0.0.1",
    "eslint": "^3.17.1",
    "eslint-plugin-babel": "^3.2.0",
    "eslint-plugin-react": "^6.10.0",
    "git-rev": "^0.2.1",
    "gulp-awspublish": "^4.0.0",
    "gulp-sftp": "^0.1.5",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.26",
    "path": "^0.12.7",
    "qs": "^6.4.0",
    "react": "^16.8.4",
    "react-addons-css-transition-group": "^15.0.2",
    "react-dom": "^16.8.4", …

我正在使用React中的fetch API创建一个简单的AJAX请求,特别是在componentDidMount()函数中.

它正在工作,因为控制台似乎正在记录结果.但是,我不知道如何访问响应...

componentDidMount = () => {

      let URL = 'https://jsonplaceholder.typicode.com/users'

         fetch(URL)
         .then(function(response) {
            let myData = response.json()
            return myData;
         })
         .then(function(json) {
            console.log('parsed json', json)
         })
         .catch(function(ex) {
            console.log('parsing failed', ex)
         })

   } // end componentDidMount

我尝试myData在fetch方法之外访问,但是这会抛出一个错误,说它是未定义的.所以它只能在函数范围内访问.

然后我尝试了这个:

     .then(function(response) {
        let myData = response.json()
        // return myData;
        this.setState({
           data: myData
        })
     })

这一次,我明白了 Cannot read property 'setState' of undefined(…)

如何将获取响应传递给状态,甚至只传递全局变量？

UPDATE

import React, { Component } from 'react';
import './App.css';

class App extends Component …