标签: reactjs

我创建了默认的 IntelliJ IDEA React 项目并得到了这个：

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/user/Programming Documents/WebServer/untitled/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

这似乎是最近的一个问题 - webpack 4 天前就遇到了这个问题，并且仍在处理中。

随着react-router我可以使用Link元素创建的原生处理反应路由器链接.

我看到内部调用this.context.transitionTo(...).

我想进行导航,但不是从链接,例如下拉选择.我怎么能在代码中这样做？什么是this.context？

我看到了Navigationmixin,但是我可以不用mixin吗？

我正在尝试在React JSX中执行以下操作(其中ObjectRow是一个单独的组件):

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

我意识到并理解为什么这不是有效的JSX,因为JSX映射到函数调用.然而,来自模板领域并且是JSX的新手,我不确定如何实现上述(多次添加组件).

我已经阅读了这个答案,减少了样板,看了几个GitHub示例,甚至尝试了redux(todo apps).

据我了解,官方redux doc动机提供了与传统MVC架构相比的优点.但它没有提供问题的答案:

为什么你应该使用Redux而不是Facebook Flux？

这只是编程风格的问题:功能与非功能？或者问题是在redux方法中遵循的能力/开发工具？也许缩放？还是测试？

如果我说redux对于来自函数式语言的人来说是一种变化,我是对的吗？

要回答这个问题,您可以比较实施redux在flux和redux上的动机点的复杂性.

以下是官方redux doc动机的动机点:

1. 处理乐观的更新(据我所知,它几乎不取决于第5点.难道在facebook flux中实现它吗？)
2. 在服务器上渲染(facebook flux也可以做到这一点.与redux相比有什么好处？)
3. 在执行路由转换之前获取数据(为什么在facebook中无法实现？有什么好处？)
4. 热重载(可以使用React Hot Reload.为什么我们需要redux？)
5. 撤消/重做功能
6. 还有其他一点吗？像坚持国家一样......

我正在尝试找到正确的方法来定义一些可以通用方式使用的组件:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

当然,父级和子级组件之间的渲染有一个逻辑,你可以想象<select>并<option>作为这种逻辑的一个例子.

对于问题,这是一个虚拟实现:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

问题是每当你{this.props.children}用来定义包装器组件时,如何将一些属性传递给它的所有子组件？

什么是...做这个阵营(使用JSX)代码,什么是它叫什么名字？

<Modal {...this.props} title='Modal heading' animation={false}>

我不知道为什么会收到此错误，并且在任何地方都找不到答案。我已经卸载了该react-router-dom软件包并重新安装了它，但它仍然告诉我交换机模块未从react-router-dom导出。这是我的代码。

我收到的错误：

尝试导入错误：“Switch”未从“react-router-dom”导出。

代码

import React from 'react';
import './App.css';
import NavBar from './components/navbar.js';
import Footer from './components/footer.js';
import Home from './components/pages/homepage/home.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app-container">
        <NavBar />
        <Switch>
          <Route path="/home" component={Home} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
}

export default App;

我出于好奇心开始学习React,想知道React和React Native之间的区别 - 虽然用谷歌找不到满意的答案.React和React Native似乎具有相同的格式.他们的语法完全不同吗？

我有一个外部(对组件),可观察的对象,我想听取更改.当对象更新时,它会发出更改事件,然后我想在检测到任何更改时重新呈现组件.

使用顶级React.render这是可能的,但在一个组件中它不起作用(这有一定意义,因为该render方法只返回一个对象).

这是一个代码示例:

export default class MyComponent extends React.Component {

  handleButtonClick() {
    this.render();
  }

  render() {
    return (
      <div>
        {Math.random()}
        <button onClick={this.handleButtonClick.bind(this)}>
          Click me
        </button>
      </div>
    )
  }
}

单击按钮会在内部调用this.render(),但这不是实际导致渲染发生的原因(您可以看到此操作因为创建的文本{Math.random()}不会更改).但是,如果我只是打电话this.setState()而不是this.render(),它可以正常工作.

所以我想我的问题是: React组件需要有状态才能重新渲染吗？有没有办法强制组件按需更新而不改变状态？

根据文档,"没有中间件,Redux商店只支持同步数据流".我不明白为什么会这样.为什么容器组件不能调用异步API,然后调用dispatch操作？

例如,想象一个简单的UI:字段和按钮.当用户按下按钮时,该字段将填充来自远程服务器的数据.

import * as React from 'react';
import * as Redux from 'redux';
import { Provider, connect } from 'react-redux';

const ActionTypes = {
    STARTED_UPDATING: 'STARTED_UPDATING',
    UPDATED: 'UPDATED'
};

class AsyncApi {
    static getFieldValue() {
        const promise = new Promise((resolve) => {
            setTimeout(() => {
                resolve(Math.floor(Math.random() * 100));
            }, 1000);
        });
        return promise;
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <input value={this.props.field}/>
                <button disabled={this.props.isWaiting} onClick={this.props.update}>Fetch</button>
                {this.props.isWaiting && <div>Waiting...</div>}
            </div>
        ); …