ReactJS 在渲染函数中传递不同的属性集答案

【问题标题】：ReactJS Pass different set of attributes at render functionReactJS 在渲染函数中传递不同的属性集
【发布时间】：2020-12-05 06:55:24
【问题描述】：

我有一个 ReactJS 组件：

class OneComponent extends React.Component {
    
  constructor(props_) {
       
    super(props_);
          
    this.width = 600;
    this.height = 600;
    this.viewBox = "0 0 600 600";
    this.preserveAspectRatio = "xMidYMid meet";
    this.responsive = true;
         
  }

  render () {
                 
    let this_ = this;
  
    return (
        
        <div ref={(divElement) => this.divElement = divElement}>
            <svg id={this.prefix} width={this.width} height={this.width} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
                <g id="svgContent">
                </g>
          </svg>
        </div>

        )
  }
    
}

export default OneComponent;

如您所见，SVG 元素具有宽度和高度参数：

<svg id={this.prefix} width={this.width} height={this.width} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>

但是，在组件参数中，我还有另一个属性 viewBox 和 preserveAspectRatio 用于响应版本。

在这种情况下，SVG 元素必须是：

<svg id={this.prefix}viewBox={this.viewBox} preserveAspectRatio={this.preserveAspectRatio} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>

那么，我可以在一种情况下只传递宽度和高度属性，而在另一种情况下只传递 viewBox 和 preserveAspectRatio。

类似：

this.responsive ? let svgParams = {width: {this.width}, height: {this.height}} : let svgParams = {viewBox: {this.viewBox}, preserveAspectRatio: {this.preserveAspectRatio}}

和

<svg id={this.prefix} {svgParams} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>

有什么建议吗？

【问题讨论】：

标签： reactjs svg parameters attributes components

【解决方案1】：

是的，你可以有条件地传递道具，试试这个。

const svgParams = this.responsive
  ? { width: this.width, height: this.height }
  : { viewBox: this.viewBox, preserveAspectRatio: this.preserveAspectRatio };

然后使用扩展运算符将 svgParams 作为道具传递

<svg {...svgParams} id={this.prefix} xmlndes='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>

【讨论】：

【解决方案2】：

你可以用以太的方式实现它。

import React from "react";
import "./styles.css";

class OneComponent extends React.Component {
  constructor(props_) {
    super(props_);
    this.width = 600;
    this.height = 600;
    this.viewBox = "0 0 600 600";
    this.preserveAspectRatio = "xMidYMid meet";
    this.responsive = true;
  }

  prepareSvg() {
    return this.responsive
      ? { width: this.width, height: this.height }
      : { viewBox: this.viewBox, preserveAspectRatio: this.preserveAspectRatio };
  }

  render() {
    return (
      <div ref={(divElement) => (this.divElement = divElement)}>
        <svg
          id={this.prefix}
          {...this.prepareSvg()}
          xmlndes="http://www.w3.org/2000/svg"
          xmlnsXlink="http://www.w3.org/1999/xlink"
        >
          <g id="svgContent"></g>
        </svg>
        <h1>hello</h1>
      </div>
    );
  }
}

export default OneComponent;

【讨论】：