Question

我需要通过条件检查在我的render方法中执行两个功能。

我的代码示例：

render() {
   return (
     {!this.state.isLoading && isFilled && this.state.value && 
       this.renderResults()}
     {!this.state.isLoading && isFilled && this.state.value && 
       this.renderButton()}
   )
}

我猜这不是最好的方法。我不喜欢重复条件。
请注意，我无法将一个功能放到另一个功能中。

Answer 1

您需要将其包装在一个容器中（例如div或Fragment）。

render() {
   const shouldRender = !this.state.isLoading && isFilled && this.state.value;
   return (
     <div>
       {shouldRender && this.renderResults()}
       {shouldRender && this.renderButton()}
     </div>
   )
}

⚠️我仅创建了shouldRender变量，以使render更具可读性，仅出于说明目的。不是必需的。

Answer 2

您可以通过这种方式使用它，不会造成任何伤害。只是我看到太多条件无法在一个函数中进行渲染。但是无论如何，这是您可以做的。而且您在返回中缺少基本元素。

render() {
   const condition = !this.state.isLoading && isFilled && this.state.value;

   return (
     <div>
         {condition && this.renderResults()}
         {condition && this.renderButton()}
     </div>
   )
}

Answer 3

您可以执行此处要执行的操作，但需要将条件包装在for /?或<div>之类的元素中。

<span>

话虽如此，您应该考虑在这里重新考虑逻辑的工作方式，因为每个语句都是相同的。如果没有更好地了解您要在此处执行的操作，我会考虑将逻辑移至每个函数。这是一个快速而肮脏的版本，但可以为您带来灵感。

render() {
   return (
      <div>
         {!this.state.isLoading && isFilled && this.state.value && 
           this.renderResults()}
         {!this.state.isLoading && isFilled && this.state.value && 
           this.renderButton()}
      </div>
   )
}

Answer 4

您可以将两个函数都包装在div中。如果条件失败，则可以返回null，因此react不会呈现任何内容。

render() {
   return !this.state.isLoading && isFilled && this.state.value ? (
       <div>
           { this.renderResults() } 
           { this.renderButton() }
       </div>
    ) : null;
}

执行两个函数以返回渲染反应

4 个答案: