Question

在React中，我将对象的URL属性（特别是amcharts图表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。我想导航时不“重置”所有先前加载的状态。

Answer 1

使用click（url）事件而不是使用"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>

包含图表的组件（例如App）

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

这是我们Column charts with images at top demo在React中的一个分支，当单击项目符号/图像时，它们都将更新主要组件的状态并转到新的URL，并都加载该人的信息：

https://codesandbox.io/s/olpzok2rxz

如果member.name不是图表数据的一部分，也不能成为图表数据的一部分，那么无论是在JSFiddle还是在CodeSandbox上都有一个应用样本，这将对我们有所帮助。

Answer 2

回应我的评论。

组件的状态始终是Javascript对象，并存储在主存储器中。每个组件的状态都在变化，直到页面刷新或关闭。之后，页面将以其初始状态初始化。

您可以使用localStorage或cookie来实现功能或混合。

示例

const Example = React.createClass({
    getInitialState: function () {
        return JSON.parse(localStorage.getItem('counter') || '{}');
    },
    componentDidMount: function () {
        let self = this;
        setInterval(function () {
            this.setState({
                ticks: this.state.ticks + 1 // Increment
            });
            localStorage.setItem('counter', JSON.stringify(this.state)); // Store
        }, 1000); // Interval
    },
    render: function () {
        return (
            <span>{this.state.ticks}</span>
    );
    }
});

链接变量

// "../Members/{member.name}";
// Make sure member.name is not an object, but a string
<a href={ `#/..Members/${members.name}` }>{members.name}</a>

为什么会有错误？

Type.js：171未捕获的错误：预期为字符串或数字，但获得了[object Function]

这是因为您正在访问作为函数的对象值。您需要一个字符串。如果不是字符串，请转换it Object.toString();。

// You are not accessing the object correctly
const param = {
  id: function() {
     // This is what it's seeing
  },
  // Needs to be
  id: '../members/id'
}

console.log(param.id);

Answer 3

bullet.url = `'../Members/${member.name}'`;

以这种方式在对象中添加到url

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

3 个答案: