I want to pass a react component or jsx code to the bindPopup function but it accepts string as input. I tried using ReactDOMServer.renderToString as shown below but the popup is not dynamic. I want an onClick event to be registered inside the PopupTemplate component. Is there any better alternative:
Code:
layer.bindPopup(
ReactDOMServer.renderToString(
<PopupTemplate
layerId={layerId}
/>
)
);
Behaviour:
I can't use the Popup component here as the layer is a drawn polygon using react leaflet draw.
I am building an app for posting tutorials. Two of the components I have are EditTutorialForm and NewTutorialForm. These two components are essentially the same except for the methods componentDidMount and onSubmit.
What seems to make the most sense is to have an abstract component type called TutorialForm and to extend it to make EditTutorialForm and NewTutorialForm.
I have read on the React docs that inheritance is not recommended with React. Would it be "better" to pass the componentDidMount and onSubmit functions as props to the TutorialForm component, as opposed to extending the component itself?
I would create one component and check within something like the following:
For a new tutorial
<TutorialForm edit={false}>
To edit a tutorial
<TutorialForm edit={true}>
And in TutorialForm
class TutorialForm extends Component{
componentDiMount() {
this.props.edit ? do edit stuff... : do new stuff
}
submitForm = () {
this.props.edit ? submit edit... : submit new
}
}
We have in our current application created react components that are to be used like dumb components by the client apps.
index.js(the entry for webpack) has the following
export {Container} from "./path/to/container";
...
export {ComponentN} from "./path/to/componentN";
We have exported it out as a node distributable. this repo also contains the container component.
We include this distributable and instantiate the components in the client app.
var containerComponent = React.createElement(Container,\*props*\,childControls)
var container = ReactDOM.render(containerComponent,\*the root node*\)
The container code is as follows
export class Container extends Component{
constructor(){
...
}
getValue(){
\*get the children and call getValue on then and return the aggregate value*\
}
render(){
return <div>{this.props.children}</div>;
}
}
but now we want to have an interface in all these components(getValue()) and hence we want reference to these child components. Any control can be passed to this container as long as the component adheres to this interface.
so in client app when we do container.getValue() which in turn should do getValue() on its children.
The problem is we cannot attach the ref callback to these child components that are passed in since the ref is read only. Neither can we clone these component and add the ref callback since React.cloneElement prohibits it and preserves the original ref.
So how do we get a reference to these child components and be able to call the getValue() function of those child components?.
If there is a better way to this entire approach, please do suggest.
I want to use Chart.js on my website. As you can see title, I'm using React.js. To use Chart.js, I need the canvas and context like this:
let context = document.getElementById('canvas').getContext('2d');
let chart = new Chart(context, ...);
so I design the component like this:
export function updateChart() {
let context = this.refs.chart.getContext('2d');
let chart = new Chart(context ,... );
...
}
export default class GraphChart extends React.Component {
constructor() {
super();
updateChart = updateChart.bind(this);
}
componentDidMount() {
updateChart();
}
render() {
return <canvas ref="chart" className="chart"></canvas>;
}
}
as you can see, I exported two things, update chart function and GraphChart class. Both will using in parent component like this:
import { updateChart } from './GraphChart';
import GraphChart from './GraphChart';
class Graph extends React.Component {
...
someKindOfAction() {
// update chart from here!
updateChart();
}
render() {
return (
<div>
<SomeOtherComponents />
<GraphChart />
</div>
);
}
}
then Parent class using exported updateChart function to update chart directly. It was working, but only first time. After unmount and mount the GraphChart component, it's refs are just empty.
Why refs is empty? And If I did wrong way, how can I get canvas context for initialize Chart.js?
Object refs is undefined, because this is not what you think it is. Try logging it.
The function you’re exporting is not bound to this of your component. Or perhaps it is, but to the last created instance of your component. You can never be sure that’s the mounted instance. And even if you are, you can not use multiple instances at the same time. So, I would dismiss this approach entirely.
Other than that, providing the function to alter some component’s state is exactly the opposite of what’s React is trying to accomplish. The very basic idea is that the component should know to render itself given some properties.
The problem you are trying to solve lies in the nature of Canvas API, which is procedural. Your goal is to bridge the gap between declarative (React) and procedural (Canvas) code.
There are some libraries which do exactly that. Have you tried react-chartjs? https://github.com/reactjs/react-chartjs
Anyways, if you’re wondering how the hell should you implement it the “React way”, the key is to declare properties your component handles (not necessarily, but preferably), and then to use component lifecycle methods (e.g. componentWillReceiveProps and others) to detect when properties change and act accordingly (perform changes to the canvas).
Hope this helps! Good luck!
I am using Griddle custom components and I have a component
var someComp = React.createCleass ...
then I set the custom component in griddle's config:
this.state.config.columns[1].customComponent = someComp;
Everything works fine: the only thing is if I want to pass a property in I don't see how? This fails:
this.state.config.columns[1].customComponent = <someComp prop1="me"/>;
So how do I pass properties to it? In my render I pass the config to Griddle so I never really use the jsx syntax ...