Problem with displaying HTML content using this.props.children with ngReact

Question

Problem with displaying HTML content using this.props.children with ngReact

Navigation

#1 by (0 votes)

1

I'm trying to present the content I inject into an Angular directive within a React component.

See below the call to the component:

<alert type="'danger'">
    <strong>Alert</strong>
    Voluptatem facilis magnam, optio provident eaque earum.
</alert>

See below my Angular / React component:

const ALERT_TYPES = [
    'danger',
    'error', // alias for danger
    'info',
    'primary',
    'success',
    'warning'
];

angular
    .module('app')
    .value('Alert', React.createClass({
        displayName: 'Alert',
        propTypes: {
            children: React.PropTypes.node.isRequired,
            className: React.PropTypes.string,
            type: React.PropTypes.oneOf(ALERT_TYPES).isRequired
        },
        render() {
            var componentClass = classNames(
                'Alert',
                'Alert--' + this.props.type,
                this.props.className
            );

            return (
                <section className={componentClass}>{this.props.children}</section>
            );
        }
    }))
    .directive('alert', alert);

function alert(reactDirective) {
    return reactDirective('Alert');
}

Unfortunately, this.props.children returns undefined . Anyone have any idea how to solve this? Thank you.

angularjs react

asked by anonymous 08.12.2015 / 20:30

1 answer

Fill web form using Java application Insert without explicit columns

score 0 · Accepted Answer

As commented on this issue , this does not work, you need to add children side of React.js, so you can rewrite the component. See below the example given in issue:

let Alert = React.createClass({
  displayName: 'Alert',
  propTypes: {
    heading: React.PropTypes.string,
    text: React.PropTypes.string,
    className: React.PropTypes.string,
    type: React.PropTypes.oneOf(ALERT_TYPES).isRequired
  },
  render() {
    let componentClass = classNames(
      'Alert',
      'Alert--' + this.props.type,
      this.props.className
    );

    return (
      <section className={componentClass}>
         <strong>{this.props.heading}</strong>
         {this.props.text}
       </section>
    );
  }
});

The call of Angular.js would look like this:

<alert type="'danger'" heading="Alert" text="Voluptatem facilis magnam, optio provident eaque earum."/>