我对 React 比较陌生,我想知道这里的标准是什么。
想象一下我有一个像这样的反应路由器:
<Router history={history}>
<Route path="/" component={App}>
<Route path="home component={Home} />
<Route path="about" component={About} />
<Route path="inbox" component={Inbox} />
<Route path="contacts" component={Contacts} />
</Route>
</Router>
现在,如果
prop.mail
设置为 false
,我想删除两条路线,所以一个明智的做法如下所示:
<Router history={history}>
<Route path="/" component={App}>
<Route path="home component={Home} />
<Route path="about" component={About} />
{ if.this.props.mail ?
<Route path="inbox" component={Inbox} />
<Route path="contacts" component={Contacts} />
: null }
</Route>
</Router>
但是有 2 条路线,React 返回错误:
表达式必须有一个父元素。
我不想在这里使用多个if。处理这个问题的首选 React 方式是什么?
将它们放入数组中(也分配键):
{ if.this.props.mail ?
[
<Route key={0} path="inbox" component={Inbox} />,
<Route key={1} path="contacts" component={Contacts} />
]
: null }
React.Fragment
,如下所示:
{ if.this.props.mail ?
<React.Fragment>
<Route path="inbox" component={Inbox} />,
<Route path="contacts" component={Contacts} />
</React.Fragment>
: null }
您必须使用片段标签,例如(div,<>,...)。
检查这个简短的解决方案:
{ if.this.props.mail ?
<>
<Route path="inbox" component={Inbox} />
<Route path="contacts" component={Contacts} />
</>
: null }
只需尝试将 return 语句后面的代码括在诸如
<div>....code </div>
等元素中。
例如:-
const Div =()=>{
return
<div>
<Button name="Save" ></Button>
<Button name="Edit"></Button>
<Button name="Cancel"></Button>
</div>}
2020更新
我已经检查了答案中的每个解决方案。以下是常规 React 的细分:
1。反应片段
当我想使用它一次,而不添加额外的 DOM 节点时 - 它起作用了。当我尝试使用第二个 React.Fragment 时,遇到了非常严重的错误。无法修复。
2。查看
我无法正确导入视图。我不知道这是否仅适用于 Reactjs,或 Native,但这不起作用
3.分区
实际有效的是将 HTML 放入 Div 中
在类似情况下遇到相同的错误(React Native)。
export default class App extends React.Component {
render() {
return (
<StatusBar barStyle="default" />
<AppContainer />
);
}
}
如错误提示所示,JSX 表达式需要有一个父元素,因此用父元素将返回表达式中的元素包装起来。添加
flex: 1
样式是为了允许 <View>
元素占据整个屏幕的高度。
export default class App extends React.Component {
render() {
return (
<View style={{flex: 1}}>
<StatusBar barStyle="default" />
<AppContainer />
</View>
);
}
}
这个对我有用。
如果您使用
<Switch>
,那么使用 <div>
和 <React.Fragment>
来包裹您的路线将会破坏它。
我喜欢
<ProtectedRoute>
组件的想法:
import { Component } from 'react';
import { Redirect, Route } from 'react-router-dom';
class ProtectedRoute extends Component<any> {
render() {
const { component: Component, allow, ...props } = this.props;
if (!allow) {
return <Redirect to={{ pathname: '/signin' }} />;
}
return <Route {...props} render={(props) => <Component {...props} />} />;
}
}
export default ProtectedRoute;
然后像下面这样使用它:
<Router history={history}>
<Route path="/" component={App}>
<Route path="home" component={Home} />
<Route path="about" component={About} />
<ProtectedRoute path="inbox" component={Inbox} allow={this.props.mail} />
<ProtectedRoute path="contacts" component={Contacts} allow={this.props.mail} />
</Route>
</Router>