如何在ReactJS中有条件地打开标签和关闭标签

Question

我在项目中使用react-zoom-pan-pinch。所以我想在渲染器中有条件地使用它。

请检查以下代码：

我知道它会工作：

render() {
    var zoomHandlers;
    if (this.props.windowTitle === "Zoom") {
      zoomHandlers = true;
    } else {
      zoomHandlers = false;
    }
    return (
      <div id={this.props.windowID}>
        {zoomHandlers ? (
          <TransformWrapper>
            <TransformComponent>
              <div className="content" style={contStyle}>
                Lot of lines are here.......
              </div>
            </TransformComponent>
          </TransformWrapper>
        ) : (
          <div className="content" style={contStyle}>
            Lot of lines here.......
          </div>
        )}
      </div>
    );
  }

但是我正在尝试这样做：

 render() {
    var zoomHandlers;
    if (this.props.windowTitle === "Zoom") {
      zoomHandlers = true;
    } else {
      zoomHandlers = false;
    }
    return (
      <div id={this.props.windowID}>
        {
          zoomHandlers ? (
          <TransformWrapper>
            <TransformComponent>)
              : null }
              <div className="content" style={contStyle}>
                Lot of lines are here.......
              </div>
              {zoomHandlers ? (    
            </TransformComponent>
          </TransformWrapper>): null}
      </div>
    );
  }

显示错误：

解析错误：意外的令牌</TransformComponent> ^

实际上，我不想一次又一次重复相同的代码，就像我在上面添加了工作代码一样。这可能吗？

Answer 1

简单地说，否。 JSX不能这样工作。

但是您可以在重复代码时执行大多数其他操作吗？ 是

应用DRY原理：将重复的代码分解为功能或组件。

renderRepeatedJSX = () => (
  <div className="content" style={contStyle}>
    Lot of lines are here.......
  </div>
);

render() {
  const zoomHandlers = this.props.windowTitle === "Zoom"
  return (
    <div id={this.props.windowID}>
      {zoomHandlers ? (
        <TransformWrapper>
          <TransformComponent>
            { this.renderRepeatedJSX() }
          </TransformComponent>
        </TransformWrapper>
      ) : this.renderRepeatedJSX()
      }
    </div>
  );
}