//так работает
import ENGChart from './ENGChart';
//так не работае, хотя так все импортирую
import {ENGChart} from './ENGChart';//Вот элемент
import React, { Component } from 'react';
import { render, findDOMNode } from 'react-dom';
import d3 from 'd3';
class ENGChart extends Component {
constructor(...args) {
super(...args);
this.state = {};
}
componentDidMount() {
const svg = d3
.select(this.refs.container)
.append('svg')
.attr('width', 400)
.attr('height', 400);
render() {
return (
<div ref='container'>
</div>
);
}
}
export default ENGChart;class Report extends Component {
componentDidMount() {
const svg = d3.select(this.refs.container)
}
render() { <div ref='container' />;}
}
Reports extends Component {
componenDidMount() {
//я правильно понимаю, что мне можно создать div и туда рендерить элемент?
render(<Report/>, document.getElementById('test'));
//render(<Report/>, document.querySelector('#test'));
}
render() { return (
<div>
<h2>Reports</h2>
<div id="test" ></div>
</div>
);}}// ref == findDOMNode
import React, { Component } from 'react';
import { render, findDOMNode } from 'react-dom';
class Test extends Component {
componentDidMount() { ref = this.refs.TestInstance; }
render() { return <p>Hi</p>; }
},
class App extends Component {
componentDidMount() { ref = this.refs.instance; }
render() {
return (
<Test/>//?
<div id="chart" />
); }
}
let ref;
const instance = render(<App />, document.querySelector('#app'));
const TestInstance = render(<Test />, document.querySelector('#chart'));