这是我的webpack配置的代码:

const compiler = webpack({
  entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')], 
  module: {
    loaders: [
      {
        exclude: /node_modules/, 
        test: /\.js$/, 
        loader: 'babel',
      },
    ],
  },
  output: {filename: 'app.js', path: '/'}, 
});

const app = new WebpackDevServer(compiler, {
  contentBase: '/public/', 
  proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
  publicPath: '/js/',
  stats: {colors: true}, 
});

app.use('/', express.static(path.resolve(__dirname, 'public')));

工作正常,应用程序运行在localhost:3000/index.html但是当我尝试实现React Router dom v4时.它不起作用.这是代码:

const About = () => <div> <h1>About</h1> </div>

ReactDOM.render(
   <BrowserRouter>
      <div>
      <Route exact path='/' component={App}/>
      <Route  path='/about' component={About}/>
      </div>
    </BrowserRouter>,
  mountNode
);

这是localhost的结果:3000/ 在localhost:3000 /约.我收到一个错误:无法获取/关于.不是我期待的,为什么这不会呈现？

关于

我在react-router-dom中有这个路径:

 <BrowserRouter>
  <div>
  <Route exact path='/(index.html)?' component={Home}/> {/* app = home */}
  <Route  path='/register' component={Registration}/>
  </div>
</BrowserRouter>

一切都工作正常,现在我的组件中的任何地方我想通过onClick更改路径,这样的代码:

<button onClick={() => history.push('/the/path') }> change path </button>

我怎样才能做到这一点？

我是React ES6的新手,我想我正在以错误的方式修改状态.当我在父组件上设置状态时,我的代码是这样的:

class App extends React.Component  {
constuctor(props)  {
     super(props);
     this.state = {name:"helloworld"};
}
 render() { 
  return( 
   <ChildComponent parentObj={this} /> // parentObj for parent context as props on child components  
  ); 
 } 
}

我的问题是在其他子组件中,我必须重复这样做,还有另一种方法吗？我没有React.createClass的问题,但我想在es6中编码所以我有这个问题.

我在 flex 容器之间的空间中有 TouchableOpacity，即使没有显示，我也想占用空间，

我的代码：

<TouchableOpacity
  style={showClear && { visibility: 'hidden' }}
  onPress={() => this.props.clearCompleted()}>
  <Text>Clear Completed</Text>
</TouchableOpacity>

display: none 有效但不占用空间，上面的代码无效但在 web 中有效？

我不知道为什么这突然不起作用，但这是我的 jest.config.js：

module.exports = {
  preset: 'react-native',
  verbose: true,
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  setupFiles: ['./jestSetup.js'],
  transformIgnorePatterns: [
    'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
  ],
  moduleNameMapper: {
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
};

和我的 jestSetup.js：

import 'react-native-gesture-handler/jestSetup';
import '@testing-library/jest-native/extend-expect';
import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';

beforeAll(() => {
  //@ts-ignore
  global.__reanimatedWorkletInit = jest.fn();
});

jest.mock('react-native-share', () => ({
  default: jest.fn(),
}));

jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  Reanimated.default.call = () => {};

  Reanimated.useSharedValue = jest.fn;
  Reanimated.useAnimatedStyle = jest.fn;
  return Reanimated;
});

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); …

例如:

function example() {
   console.log("outside the if block above function b declaration"+b()); 
  function a() {
   return "you invoked function a";
  } 
  if (true) {
    console.log("inside the if block"+a());
    console.log("inside the if block above function b declaration"+b());
    function b() {
      return "you invoked function b";
    } 
  }
}

当我调用这个example()函数时,我得到一个错误,b是未定义的,但当我删除第二行调用函数b在if块中定义时它都可以吗？

我有这个代码:

<BrowserRouter>
   <Route  path="/(:filter)?" component={App} />
</BrowserRouter>

根据以前的路由器版本,过滤器参数或"根"假设是在App组件的道具上吗？

这是我在我的应用程序上的代码:

const App = ({params}) => {
    return ( // destructure params on props
      <div>
        <AddTodo />
        <VisibleTodoList 
            filter={params.filter || 'all'} // i want to git filter param or assign 'all' on root 
        />
        <Footer />
      </div>
    );
}

我在控制台上记录了this.props.match.params,但它没有？救命？

这是 wtform 的提交按钮代码：

{{ form.submit(class="w-50 btn btn-primary btn-sm submit-btn") }}

我正在考虑在单击时向其添加一个类？我知道通过添加这样的类来显示 wtform+jinja2 中的错误的方法：

{% if reg_form.confirm_password.errors %}
   {{ reg_form.confirm_password(class="form-control form-control-sm is-invalid") }}
          <div class="invalid-feedback">
             {% for error in reg_form.confirm_password.errors %}
                <span>{{ error }}</span>
             {% endfor %}
          </div>
   {% else %}
       {{ reg_form.confirm_password(class="form-control form-control-sm")}}
   {% endif %}

我查看了 SubmitField 的文档，但我看不到禁用它的方法。https://wtforms.readthedocs.io/en/stable/fields.html

这是我的代码：

const result = await Todo.updateMany(
      { _id: { $in: ids }, userId },
      { $set: { complete } },
      { new: true }
    ).populate('userId', '_id');
res.json({ todos: result })

它适用于更新数据，但返回以下内容：

{ n: 1,
  nModified: 1,
   opTime:
    { ts:
       Timestamp { _bsontype: 'Timestamp', low_: 1, high_: 1543568180 },
      t: 1 },
   electionId: 7fffffff0000000000000001,
   ok: 1,
   operationTime:
    Timestamp { _bsontype: 'Timestamp', low_: 1, high_: 1543568180 },
   '$clusterTime':
    { clusterTime:
       Timestamp { _bsontype: 'Timestamp', low_: 1, high_: 1543568180 },
      signature: { hash: …

此代码适用于 JavaScript：

var timeFormat = d3.timeFormat("%M:%S");
var yAxis = d3.axisLeft(y).tickFormat(timeFormat)

但是 TypeScript 中的这段代码不起作用：

const yAxis = d3.axisLeft(y).tickFormat(d3.timeFormat("%M:%S"));

function timeFormat(specifier: string): (date: Date) => string 返回给定字符串说明符的新格式化程序。返回的函数格式化指定的日期，返回相应的字符串。

默认语言环境中 locale.format (TimeLocaleObject.format) 的别名。

@param 说明符 — 日期格式的说明符字符串。

错误是

'(date: Date) => string' 类型的参数不能分配给 'null'.ts(2345) 类型的参数