Hacker News Reader

Comment by illicium | Hacker News Reader

I'm not particularly fond of the way React mixes presentation (returning nodes in render()) and logic. Particularly things like:

    var classes = _.reduce(["flipped","correct","wrong"],function(m,c){return m+(this.state[c]?c+" ":"");},"",this);

seem very inelegant compared to say, Angular's ngClass, which does the same thing in a data-driven way. But, that's not to say Angular is free from template logic either.

View on HN

This isn't a React issue; this is a failure to use an abstraction where appropriate. React offers the classSet plugin for exactly this use case.

http://facebook.github.io/react/docs/class-name-manipulation...

I think the React authors agree that React classes shouldn't contain excessive logic; if your class does, consider extracting it to somewhere more appropriate.

Oh, indeed, I've completely missed the classSet plugin! That would indeed make the code more elegant. And fair point about the logic perhaps being too complicated here.

Thanx for the pointers!

The classSet addon works nicely for the cases I've run into.

http://facebook.github.io/react/docs/class-name-manipulation...

I find that the ability to trivially make the equivalent of Rails "helper" functions as auxiliary methods on the Component class actually tends to encourage separation of logic - it's the same file so there's no context switch needed. On top of that, since JSX makes ternary statements look much more elegant than bracketed if statements (whose conditions can be a great hiding place for complex logic) it further encourages breaking your logic out into auxiliary functions.

Reply on news.ycombinator.com