javascript - 如何渲染 jsx 以响应条件为真和数组映射？

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}
          />
        )
      );
    })}
</>