如何渲染 jsx 以響應條件 true 和數組映射？

Question

我想渲染某個條件為真的 JSX 並映射到一個數組。

下面是代碼，

{this.props.variables &&
     this.props.variable.map((variable, index) => {
         let element;
         if (variable.anchor) {
             element = document.querySelector(variable.anchor);
         }
         this.box_ref.current && element && (// error here
             <Childcomponent
                 element1={this.box_ref.current}
                 anchor={variable.anchor}
              />)
          }
      }
  )
}

有一個錯誤說該表達式不是賦值或調用。 我該如何解決？ 謝謝。

Answer 1

您需要為#Array.map callback提供返回值。

此外，您應該為數組中的 React 元素提供唯一鍵：

<>
  {this.props.variables &&
    this.props.variable.map((variable, index) => {
      let element;
      if (variable.anchor) {
        element = document.querySelector(variable.anchor);
      }
//       v Add return statement
      return (
        this.box_ref.current &&
        element && (
          <Childcomponent
            key={index}
            element1={this.box_ref.current}
            anchor={variable.anchor}
          />
        )
      );
    })}
</>