小编Ans*_*ava的帖子

我是新来的反应和仍在学习我的方式。我正在创建一个单页应用程序，如果用户未登录，用户将被重定向到登录页面。 React 有一个重定向组件，我不知道如何使用它。

以下是我的 app.js :-

import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'

import './App.css';

class App extends Component {

  state = {
    loggedIn: false // user is not logged in
  };

  render() {

    return (
        <Switch>
          <Route path="/protected" component={Protected}/>
          <Route path="/login" component={Login}/>
        </Switch>
    );
  }
}

export default App;

在上面的场景中，/login如果状态loggedIn为假，我希望用户被重定向到页面，否则它应该转到/protected页面。

我通过将父状态作为道具传递给子组件来打开子组件模态。有没有办法从子组件本身关闭模态而不受父组件的任何干扰。

class Parent extends Component {

    constructor(props) {
      super(props);
      this.showModal = this.showModal.bind(this);
      this.state = {
        showModal: false
      };
    }
    showModal() {
      this.setState({ showModal: true });
    }
    renderRow() {
      return (
        <tr>
          <td onClick={() => this.setState({ show: true })}>test</td>
          <ChildModal show={this.state.showModal}/>
        </tr>
      );
    }
}


class ChildModal extends Component {
  render() {
    return (
       <Modal show={this.props.showModal}>
            <Modal.Header closeButton> 
            <Modal.Title>Test</Modal.Title> 
            </Modal.Header>
            <Modal.Body> 
                {/* some text */}
            </Modal.Body>
        </Modal>
    );
  }
}

我希望我的孩子模态是独立的。这在反应中甚至可能吗？

我是颤振新手，仍在学习。我正在尝试获取 SharedPreferences 实例的引用，但出现以下错误

_CastError（对空值使用空检查运算符）

这就是我的代码的样子

应用程序设置.dart

class AppSettings {
  
  final SharedPreferences _pref;
  
  AppSettings._(this._pref);

  static AppSettings? _instance;

  static initialize() async {
    if (_instance != null) {
      // already initialized
      return;
    }
    // instance not found. creating one
   
    var pref = await SharedPreferences.getInstance();
    _instance = AppSettings._(pref);

  }
}

主程序.dart

Future<void> main() async {
  // initializing application settings
  await AppSettings.initialize();
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "hello app",
        home: AppHome());
  }
}

经过进一步调试，我发现异常是由invokeMapMethod引发的 …

我是新手，仍在学习。我正在尝试在我的 React 项目中添加嵌套路由，以便 div 的内容根据路由而变化。

以下是我的组件：-

//index.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

library.add(faIgloo);

ReactDOM.render(<BrowserRouter>
  <App />
</BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();


// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'



import './App.css';

class App extends Component {

  render() {
    return (
        <Switch>
          <Route exact path="/protected" component={Protected}/>
          <Route path="/login" component={Login}/>
        </Switch>
    );
  }
}

export default …