Question

我正在尝试在我的应用中为authenticate链接创建一个组件。

我想使用它：

<Authenticated>
    <Link to="/login">Login</Link>
</Authenticated>

为此，我写了这段代码。

import React from 'react'
import { connect } from 'react-redux'

class Authenticated extends React.Component {
  render() {
    let content = null;
    if(this.props.authenticate) {
      content = this.props.children
    }
    return (
      <span>{content}</span>
    )
  }
}

function mapStateToProps(state){
  return {
    authenticate: state.auth.authenticated
  }

}
export default connect(mapStateToProps)(Authenticated)

验证后它正确显示我链接。但问题是span。

<span>{content}</span>，其回复Link包裹着span。这不允许我把它变成全球性的（把它放在任何地方）。

如果我将删除span包装器的抛出错误。

Uncaught Error：Authenticated.render（）：一个有效的React元素（或必须返回null）。您可能已经返回undefined，数组或一些其他无效的对象。在不变量（invariant.js：44）在ReactCompositeComponentWrapper._renderValidatedComponent（ReactCompositeComponent.js：831）在ReactCompositeComponentWrapper.performInitialMount（ReactCompositeComponent.js：362）在ReactCompositeComponentWrapper.mountComponent（ReactCompositeComponent.js：258）在Object.mountComponent（ReactReconciler.js：46）在ReactCompositeComponentWrapper.performInitialMount（ReactCompositeComponent.js：371）在ReactCompositeComponentWrapper.mountComponent（ReactCompositeComponent.js：258）在Object.mountComponent（ReactReconciler.js：46）在ReactDOMComponent.mountChildren（ReactMultiChild.js：238）在ReactDOMComponent._createInitialChildren（ReactDOMComponent.js：691）

请帮我从输出中删除span。

Answer 1

如果您不将 content 包裹在 span 中而是包裹在一个空元素中会怎样？

<>{content}</>

另一个也可以更短。

{this.props.authenticate ? (<>{this.props.children}</> : null}

Answer 2

根据DOC：

，您可以使用React.Fragment

片段允许您在不添加额外节点的情况下对子列表进行分组到DOM。

像这样写：

class Authenticated extends React.Component {
  render() {
    let content = null;
    if(this.props.authenticate) {
      content = this.props.children
    }
    return (
      <React.Fragmen>{content}</React.Fragment>
    )
  }
}

在实际dom中，react将跳过片段并直接呈现内容。

必须返回有效的React元素（或null），ReactJS

2 个答案: