Question

单击图像时，我试图重定向到指定的URL。默认情况下，它将在URL的开头附加本地主机，因此将URL视为本地主机的子域，并且该本地域不可访问方法1：

<a rel="noopener noreferrer" href={rowData.preview} target="_blank">
   <Image
    className="preview-content"
    src={webAttachment}
   />
</a>

方法2：

<Link to={rowData.preview}>
    <Image
     className="preview-content"
     src={webAttachment}
    />
</Link>

{rowData.preview}包含任何网站的网址。任何一种方法都无法获得可靠的解决方案。

Answer 1

尝试这些代码行。

import { Link } from "react-router-dom";

<Link to="https://www.google.com/">
    <Image src="abc.jpg" className="imageLink" />
</Link>

Answer 2

href =“ google.com”将导致“ your-current-full-url / google.com”。
href =“ / google.com”将导致“您的域/google.com”。
href =“ https://google.com”将导致“ google.com”。

不只是在反应。即使在普通的html中，其工作方式也相同。因此请确保您在rowData.preview中传递的外部URL具有http：//

Answer 3

export class DynamicFilterComponent implements OnInit {
  @ViewChild('treeSelector') public tree: any;

  public nestedTreeControl: NestedTreeControl<LocationFilterUiModel>;
  public nestedDataSource: MatTreeNestedDataSource<LocationFilterUiModel>;
  public operators = [];
  public operatorConstants = LocationFilterOperator;
  public locationField: FormControl = new FormControl();
  public locationFieldResults = LOCATION_FILTER_FIELD;

  constructor(private database: DynamicFilterDataService,
              private dialogRef: MatDialogRef<DynamicFilterComponent>,
              private searchDataService: SearchDataService) {
    this.nestedTreeControl = new NestedTreeControl<LocationFilterUiModel>(this._getChildren);
    this.nestedDataSource = new MatTreeNestedDataSource();

    database.dynamicFilterRawData.subscribe(data => this.nestedDataSource.data = data);

    this.locationField.valueChanges.subscribe(inputField => {
        this.filterField(inputField);
      }
    );
  }

  public ngOnInit(): void {
    this.getOperators();
  }

  private _getChildren = (node: LocationFilterUiModel) => node.predicates;

  public addNewItem(node: LocationFilterUiModel): void {
    this.database.insertItem(node, '');
    this.nestedTreeControl.expand(node);
    this.renderChanges();
  }

  public remove(node: LocationFilterUiModel): void {
    this.database.removeItem(node, this.database.data[0]);
    this.renderChanges();
  }

  public renderChanges(): void {
    const data = this.nestedDataSource.data;
    this.nestedDataSource.data = null;
    this.nestedDataSource.data = data;
  }

  public closeDialog(): void {
    this.dialogRef.close();
  }

  private getOperators(): void {
    SUPPORTED_OPERATORS.forEach((operator) => {
      const operatorConstant: OperatorConstants = {
        key: operator.key,
        value: operator.value
      };
      this.operators.push(operatorConstant);
    });
  }

  private filterField(value: string): string[] {
    if (value) {
      this.locationFieldResults = LOCATION_FILTER_FIELD.filter((searchFieldResult) => {
        return searchFieldResult.indexOf(value) !== -1;

      });
    } else {
      this.locationFieldResults = LOCATION_FILTER_FIELD;
    }
    return this.locationFieldResults;
  }
}

访问stackoverflow链接。

Maintaining href "open in new tab" with an onClick handler in React

Answer 4

<a target="_blank" href="https://www.linkedin.com/">
   <img
       src={b4}
       alt="Linkedin"
       className="mw3-ns"
       style={{height: "50px", width: "50px", cursor: "pointer"}}
                                
    />
 </a>

这对我有用。虽然我收到使用target =“ _ blank”

的警告

如何在reactjs中点击图片上的其他URL重定向？

4 个答案: