В React, как добавить URL "строку" в качестве свойства объекта из ссылки или другого компонента. - PullRequest
Новая
       7

В React, как добавить URL "строку" в качестве свойства объекта из ссылки или другого компонента.

4 голосов
/ 30 марта 2019

В React я устанавливаю свойство URL объекта (в частности, amcharts chart bullet.url), которое является строкой, в "../members/ enjmember.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 ссылки.Я бы хотел перемещаться без «сброса» всех ранее загруженных состояний.

Ответы [ 3 ]

1 голос
/ 04 апреля 2019

Вместо использования url s используйте событие 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);

Вот пример наших столбчатых диаграмм с изображениями в верхней части демонстрации . Реагируйте, что при нажатии на маркер / изображения, оба обновляют состояние основного компонента, а также переходят на новый URL, и оба загружают информация о человеке:

https://codesandbox.io/s/olpzok2rxz

Если member.name не является частью данных диаграммы и не может быть, было бы полезно иметь образец вашего приложения на JSFiddle или CodeSandbox, чтобы мы могли помочь в дальнейшем.

0 голосов
/ 30 марта 2019 
bullet.url = `'../Members/${member.name}'`;

добавить этот путь в объект из к URL

0 голосов
/ 30 марта 2019

В ответ на мой комментарий.

Состояние компонента всегда является объектом 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 Uncaught Ошибка: ожидается строка или число, но получено [объект Функция]

Это потому, что вы обращаетесь к значению объекта, которое является функцией. Тебе нужна строка. Если это не строка, конвертируйте 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);
...