有没有办法判断ReactElement是否呈现“null”？

在我的JSX，我有一个条件呈现逻辑的情况下 - 当A元素呈现的东西（这是render()函数返回比null其他的东西），然后还渲染元素B，只是元素A.有没有办法判断ReactElement是否呈现“null”？

代码上面的例子（简体）是这样的：

function render() { 
    let elemA = (<ElementA someProp={this.someVar} />); 

    if (elemA.isNull()) { 
     return (
      <div> 
       { ...someElements } 
      </div> 
     ); 
    } 

    return (
     <div> 
      { ...someElements } 
      <ElementB /> 
      { elemA } 
     </div> 
    ); 
}

所以我的问题是 - 有什么办法有elemA.isNull()检查？

来源

2015-10-14 mdziekon

阵营可能不“知道”如果elemA已经在这一点上呈现的东西，因为渲染方法只是描述了一个结构。 – David

好的，所以在这种情况下，我看到两个选项来解决这个问题： ** a）**在ElementA类中创建一个自定义方法，它会告诉我它是否会渲染“null”或其他东西 ** b）**在ElementA中移动条件渲染，并传递任何东西以渲染道具。 |我不确定前面的选项是否实际上是可能的，尽管... – mdziekon

如果ElementA是一个纯粹的组件（通过道具描述的onky），那么从这个.VarVar应该也可以告诉元素A是否会被渲染。 – wintvelt

不，没有办法确定孩子会使用React渲染什么。这样做的标准方法是公开一些说A是否会呈现的效用函数。

喜欢的东西：

if (AUtils.isStoryValid(story)) { 
    return <A story={story} />; 
} else { 
    return <B story={story} />; 
}

来源

2016-08-21 01:13:00

您可以使用下面的高阶组件（HOC）拦截渲染ElementA的方法，完成你想要什么：

function withNullCheck(WrappedComponent) { 
    return class NullChecker extends WrappedComponent { 
    render() { 
     const result = super.render(); 
     return(
     <div> 
      { this.props.alwaysPrefix } 
      { result && this.props.ifNotNullPrefix } 
      { result ? result : this.props.ifNull } 
      { result && this.props.ifNotNullAppend } 
      { this.props.alwaysAppend } 
     </div> 
    ); 
    } 
    } 
}

你会使用它像这个：

const NullCheckedElementA = withNullCheck(ElementA); 

... 

function render() { 

    return ( 
     <NullCheckedElementA 
     alwaysPrefix={someElements} 
     ifNotNullPrefix={elemB} 
     someProp={this.someVar} 
     /> 
    ); 

}

来源

2016-09-07 17:41:03 Pablo

所以我遇到了一个情况，我被卡住不得不这样做，在这里我这是一种行之有效的方式（尽管这种冒失可能会让你哭泣）。

只能作为最后的手段使用，因为它确实是一个彻头彻尾的破解，并且根据组件的复杂程度，您将获得大约0-20ms的性能。（供应商是有假设你使用终极版和您的组件依赖于你的终极版状态）：

import { renderToStaticMarkup } from 'react-dom/server'; 
import { Provider } from 'react-redux'; 
import store from 'pathToYourReduxStoreInstance'; 


export default function isRenderingNull(componentInstance) { 
    return !renderToStaticMarkup(
    <Provider store={store}> 
     {componentInstance} 
    </Provider> 
) 
}

来源

2017-03-29 21:40:25 SirRodge

有没有办法判断ReactElement是否呈现“null”？

回答

相关问题