This is the component that I'm using:
<my-component
data="vm.data"
></my-component>
I would like to pass it a translated string, but I get a syntax error:
<my-component
data="vm.data"
string="{{ 'TOP_FIVE' | translate }}" // throws error in browser console
></my-component>
How can I pass along the translated string value?
Since you are using angular-translate the best way is to inject the $translate service to your react2angular component and extend your react component with a function that return the translated string:
// INJECT SERVICE
angular
.module("components", [])
.component(
"myComponent",
react2angular(MyComponent), ["data"], ["$translate"])
)
// REACT COMPONENT
class MyComponent extends React.Component {
translate = key => {
return this.props.$translate.instant(key)
}
render() {
return (
<p>{this.translate('TOP_FIVE')}</p>
)
}
}
Related
I am new on react
I tried to execute this function in react
export default class App extends Component{
render(){
function SSS(t)
{
this.t=t;
return this;
}
console.log(SSS(1).t);
}return(
<h1>H</h1>
)}
}
but it still gives me that error
TypeError: Cannot set property 't' of undefined
I read about "this" in MDN
they mentioned the reason of this error is how to call the function
it works perfectly on js pure.
could you help me with that,please ?
thnx!
SSS function call should assign t variable onto its execution context, e.g., if you call it in within window object, the variable can be accessed from there,
window.t // 1. Provided you are in 'use strict' mode., you will get
TypeError: Cannot set property 't' of undefined
If you want to bind custom context to SSS, you should either use call/apply/bind, examples:
SSS.call({}, 1)
SSS.apply({}, [1])
SSS.bind({})(1);
or constructor call:
new SSS(1);
Welcome to StackOverflow.
You're using "this" in a function-in-function, "this" is not defined there.
What you want is put SSS(t) outside of render, as a class method.
Like this:
export default class App extends Component{
SSS(t)
{
this.t=t;
return this;
}
render(){
console.log(this.SSS(1).t);
return(
<h1>H</h1>
);
}
}
Also, not that doing this.t = t is dangerous in React. You should probably use this.state.t and this.setState() instead. Check this for more info :
Why can't I directly modify a component's state, really?
https://reactjs.org/docs/state-and-lifecycle.html
I'm trying to migrate my class based component to functional component.
keep getting struggles on change getter / static methods , how can I achieve these?
// class based component
class Example extends Component {
...
flag = Math.random * 1 + 1;
get someGetter(){
return flag
}
usingGetter(){
if(this.someGetter) console.log("using Getter called! ");
}
static someStatic(){
console.log("this is some static function" );
}
...
}
just convert it to normal variable, you dont need it as class member
const someGetter = () => flag
usingGetter () {
if (someGetter()) console.log("using Getter called! ");
}
I've been using React with TypeScript for a year. And the thing that makes me like React is that almost everything in React can be type safety when using TypeScript.
Angular 2, although, it was made for using with TypeScript but it still requires the use of "magic string" inside template. That makes me disappointed.
Example (with React):
class ClickMeComponent extends React.Component<{}, {clickMessage: string}> {
state = {
clickMessage = ""
}
onClickMe = () => {
this.setState({clickMessage: "You are my hero!"});
}
render() {
<button onClick={onClickMe}>Click me!</button>
{this.state.clickMessage }
}
}
Example (with Angular 2):
#Component({
selector: 'click-me',
template: `
<button (click)="onClickMe()">Click me!</button>
{{clickMessage}}`
})
export class ClickMeComponent {
clickMessage = '';
onClickMe() {
this.clickMessage = 'You are my hero!';
}
}
The React's template is totally type safety but the Angular's one is using string "onClickMe()"
Why couldn't Angular team design it somehow to get type safety from TypeScript? Especially when they created Angular 2 to use with TypeScript at first?
I have a simple <Trans/> React Component which allows to translate a key with some properties (I use sprintf). For example:
<Trans planet="World">Hello %(planet)s</Trans>
renders:
Hello World
The issue is when trying to render some of those properties dynamically, say instead of "World" I want to have
<Trans color="blue">%(color)s planet</Trans>
Now, what react does is first outputting the following:
Hello [object Object]
Before going down the render path and correctly render
Hello blue planet
This results in a little flickr of showing [object Object] instead of the rendered element. I have tried to use renderToString, but then it would force me to use some dangerouslySetInnerHTML which doesn't work with other translation constrains.
Any thoughts?
import React, {PropTypes, Component} from 'react'
import {sprintf} from 'sprintf-js'
export default class Trans extends Component {
translate(key, args){
if(this.props.context && this.props.context[key]) key = this.props.context[key]
else console.error('%s is not in translated keys', key, ' - context was ', this.props.context)
if(typeof key === 'object' && key.singular){
if(this.props.isPlural)
return sprintf(key.plural, args)
else
return sprintf(key.singular, args)
}
return sprintf(key, args)
}
render() {
return (
<span>
{this.translate(this.props.children, this.props)}
</span>
)
}
}
You need to ensure that the #toString() method on the color prototype returns what you want.
I have an XHP component:
final class :common:message-stripe extends :ui:base {
use XHPReact;
protected function compose() {
$this->constructReactInstance( "MessageStripe", Map {} );
return <div id={$this->getID()} />;
}
}
that should look like this in my .php file:
<common:messagestripe>
This is my message :)
</common:messagestripe>
On the ReactJS side, the component looks something like this:
var MessageStripe = React.createClass({
render: function() {
return (
<div className="message"> {this.props.children} </div>
);
}
});
However, I get errors about rendering null in my ReactJS component, which means that children are not sent correctly. So, my question: how can I pass the children from XHP to ReactJS?
You're not including your children when rendering your XHP component.
final class :common:message-stripe extends :ui:base {
use XHPReact;
protected function compose() {
$this->constructReactInstance( "MessageStripe", Map {} );
return <div>{$this->getChildren()}</div>;
}
}
Additionally, (assuming you built your :ui:base element with attribute forwarding as outlined here: Building a Good UI Framework with XHP) you don't need to manually set the ID of your root element, XHPJS::element() will do that for you.