Question

应该呈现React组件，或者根据某些条件不应该呈现React组件我可以这样做，按照

class Parent extends React.Component{
  render(){
    {condition() && <Child />}
  }
}

到现在为止，没关系，但问题是我的项目中有很多Parent组件。

所以我想在子组件中放入condition（）函数，如下面的

class Child extends React.Component{
  render(){
    {condition() && <div>Child Component rendered!!</div>}
  }
}

class Parent extends React.Component{
  render(){
    <Chile> {/* type nothing */}
  }
}

但不幸的是，智利组件具有ComponentDidMount（）功能而且这个功能做了很多事情。（就像ajax调用..）

如何防止调用与React相关的函数？（如ComponentXXX ...）

有什么好方法吗？

Answer 1

在您实际渲染组件后，无法阻止组件按照惯例触发组件方法。正如您所指出的，您必须先处理是否实际渲染组件。

如果您不希望渲染条件位于父级中，最简单的方法是将子级包装在处理条件的另一个中间（或更高级别）组件中。这看起来像这样：

// 'ConditionallyRenderChild.jsx'
import React from 'react'
function someCondition () {
  // Return true or false, depending on condition
}

const ConditionallyRenderChild = ({children}) => {
  // If condition is met, render child...
  // ...otherwise return null
  return someCondition() ? children : null
}

export default ConditionallyRenderChild


// `Parent.jsx`
import React, { Component } from 'react'
import ConditionallyRenderChild from './ConditionallyRenderChild'

export default class Parent extends Component {
  render () {
    <div>
      <ConditionallyRenderChild>
        <Child /> {/* This won't render unless condition is met by ConditionallyRenderchild lets it */ }
      </ConditionallyRenderChild>
    </div>
  }
}

控制反应组件中的渲染

1 个答案: