时间戳

首页 > 解决方案 > 在 React 中，如何从链接或其他组件添加 URL“字符串”作为对象的属性

javascript - 在 React 中，如何从链接或其他组件添加 URL“字符串”作为对象的属性

问题描述

在 React 中，我将一个对象的 URL 属性（特别是 amcharts chart bullet.url）设置为“../members/{member.name}”，它是一个字符串，它可以毫无问题地呈现。单击该链接可正确导航到该页面。但是，似乎所有先前加载的状态都需要重新加载。它是一个新的 React “会话”吗？

我尝试使用 Link 使用各种表达式设置属性。但似乎没有一个按预期编译。我发现的大多数文章都与 Link 或持久状态的基本用法有关。

以下工作渲染和导航，但所有状态都在新页面上消失了：

let series = chart.series.push(new am4charts.LineSeries());
let bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.url = "../Members/{member.name}";

我在想我缺少一个 React 概念，或者是一种设置链接 URL 的简单方法。我想导航而不“重置”所有先前加载的状态。

标签： javascriptreactjsamchartsamcharts4

解决方案

不要使用urls，而是使用 click ( "hit") 事件来留在 React 生态系统中。如果您允许通过 React Router 渲染图表组件并使用 导出它withRouter，您可以利用this.props.history组件本身。至于如何处理会员姓名，假设bullet实际上是其他项目符号的模板，我个人认为会员姓名应该是图表数据的一部分。例如

主要成分：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter as Router } from "react-router-dom";

// ...

// main component's render
  <Router>
    <React.Fragment>
      <Route
        path="/"
        render={props => <App {...props} />}
      />
      <Route
        path="/Member/:name"
        render={props => <Person {...props} extra="via router" />}
      />
    </React.Fragment>
  </Router>

具有您的图表的组件（例如应用程序）：

import React from "react";
import { withRouter } from "react-router-dom";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

// App's componentDidMount() ...

// ...chart code...

// Member names found in bullet data
chart.data = [ { name: "...", /* ... */ }, /* ... */ ];

// Since we're not using `url`, manually change the cursor to a pointer on hover
bullet.cursorOverStyle = am4core.MouseCursorStyle.pointer;

// Bullet click event
bullet.events.on("hit", event => {
    this.props.history.push('../Members/' + event.target.dataItem.dataContext.name);
});

// ... end App

export default withRouter(App);

这是 React顶部演示中带有图像的柱形图的一个分支，当单击项目符号/图像时，两者都会更新主要组件的状态并转到新的 URL，并且都加载人员的信息：

https://codesandbox.io/s/olpzok2rxz

如果member.name它不是图表数据的一部分并且不能，那么无论是在 JSFiddle 还是 CodeSandbox 上都有一个您的应用程序示例，这样我们才能提供进一步的帮助。

推荐阅读