小编rav*_*l91的帖子

我想使用身份验证建立安全路由。我已经在 App.jsx 文件中定义了路由。我正在使用“路由”来定义要呈现的组件。

在 App.jsx 中

<Route 
    path='/dashboard'
    exact={true}
    render={(props) => <Dashboard {...props} user={user} 
    handleChildFunc={this.handleChildFunc}/>}
/>

上面的代码没有任何问题。我想让它像下面一样安全。

<PrivateRoute 
    path='/dashboard'
    exact={true}
    render={(props) => <Dashboard {...props} user={user} 
    handleChildFunc={this.handleChildFunc}/>}
/>

在 PrivateRoute.jsx 中

const PrivateRoute = ( props ) => {
  const user = "token from cookie"; // i will fetch token stored in cookie
  if(user !== null) {
    return <Route   />;
  }
  else {
    return <Redirect to="login" />
  }
}

如果令牌存在，则呈现组件。否则，重定向到 /login。

CSS我尝试在组件中使用网格React，但在第一个破折号中出现错误grid-template-columns，有什么想法为什么会发生这种情况吗？

<div style={{display:'grid', grid-template-columns: '1fr 1fr'}}>

我尝试使用React Stable版本安装React native,但它安装了React:16-alpha

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0"
}

那么如何使用React Stable版本安装React-native？

我得到一个

“regeneratorRuntime 未定义”

尝试在项目中使用async/await时。

我的babelrc文件目前是这样的：

{
    "presets": ["env", "react"],
    "plugins": [
        "transform-runtime",
        "transform-object-rest-spread"
    ]
}

我的package.json是：

{
    "name": "****",
    "version": "1.0.0",
    "description": "****",
    "main": "index.js",
    "author": "****",
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "start": "yarn build && nodemon server/index.js --ignore dist/ --ignore public/",
        "watch": "parcel watch public/index.html --public-url /",
        "build": "parcel build public/index.html --public-url /",
        "test": "jest"
    },
    "dependencies": {
        "@babel/runtime": "^7.5.5",
        "axios": "^0.19.0",
        "express": "^4.17.1",
        "express-validator": "^6.1.1",
        "react": "^16.9.0",
        "react-dom": "^16.9.0", …

您好，我希望它InstrumentPage在#/访问时以无道具的形式呈现，但在#/ipb访问通过时ipb作为props实体。但这不起作用。

  render() {
    return (<React.Fragment>
      <HashRouter>
        <Switch>
          <Route path='/' render={(props) => <InstrumentPage {...props} />}/>
          {Object.keys(AppConfig).forEach((property) =>
            <Route path={property} render={(props) => <InstrumentPage {...props} entity={property} />} />)
          }
        </Switch>
      </HashRouter>
    </React.Fragment>);
  }

AppConfig

const AppConfig = {
  pb: {
    header: 'PBHeader',
    body: 'PBBody',
  },
  ipb: {
    header: 'IPBHeader',
    body: 'IPBBody',
  },
};    
export default AppConfig;

我想更改反应引导模式弹出窗口的背景颜色。

我的模态代码是 -

<Modal
    show={this.state.show}
    onHide={this.handleClose}
    dialogClassName="modal-90w public-profile-modal-class"
    size='lg'
    aria-labelledby="example-custom-modal-styling-title"
>

那么如何改变呢？

<div>
     <ReactTable
         data={this.state.listFruitData}
         columns={columns}
         defaultPageSize={10}
         getTrProps={onRowClick}
     />
</div>

1. I am actually populating data(listFruitData) in ReactTable from post request call.
2. My requirement is I need to first select row of ReactTable may be using some background color so that it looks like the row is selected
3. While I am selecting row I should get hand(icon) hover on ReactTable row
4. How to do this?

Say I have a JS file contains 2 React Component class definition and a bunch of other things:

// a file called OuterComponent.react.js

import xxx from xxx;
import yyy from yyy;

// When does these run?
let a = 0;
a = 1;

export default class OuterComponent extends React.PureComponent<> {
  render() {
    return (
      <View>
       <InnerComponent />
      </View>
    );
  }
}

class InnerComponent extends React.PureComponent<> {
  //... something
}

Questions

1. When will the declaration and value setting code for 'a' …

我有一个 html 下拉选择控件，并且已将第一个选项值添加为Select. 还有其他几个选项可以从下拉菜单中选择。现在我想重置下拉值并将其设置回Select.

我如何在 React 中做到这一点？

这是我的代码

<select className="form-control" ref="Auditee" name="Auditee" onChange={this.handleChange.bind(this)}>
                <option>Select</option>
                {this.renderAuditee()}
              </select>
<button type="button" className="btn btn-primary" onClick={this.handleClear}>Clear</button>



renderAuditee(){
  let Auditeefiltered = this.state.review1data.map(element=> element.EEECPM).filter((value, index, self) => self.indexOf(value) === index)

  return Auditeefiltered.map(element=>
   <option>{element.toString().replace(/\[.*?\]/,'')}</option>
  )
}


handleClear(e){
 e.preventDefault();

    this.setState({
        filterData:[],
        filter: false
 });

我不知道我应该如何重置选择下拉列表。任何帮助都会有所帮助

我有一个简单的网站，有 2 个可以离线工作的链接，但是如果我部署它并将其上传到网站上，那么第一页工作正常，但是当我单击“添加链接”时，它会给我 404 并且列表链接工作正常，两个链接都可以在离线状态下正常工作

<a href="/react/">List</a>
<a href="/react/Add">Add</a>

路由器文件

ReactDOM.render(
  <BrowserRouter>
    <Route path="/react/" exact component={List}/>
    <Route path="/react/Add" exact component={Add}/>
  </BrowserRouter>,
  document.getElementById('root')
);

包.json

{
    "name": "axios1",
    "version": "0.1.0",
    "homepage":"http://aroratour.com/react/",