AngularJS attribute attribute count in React

Question

What is the best way to implement something like an AngularJS attribute directive in React?

I have been using React for over 6 months.

I understand that AngularJS is working on the DOM and React is working on the Virtual DOM, but says that I want to implement something like ng-if in React instead of writing a three-dimensional statement all over the world. I know that I can write a component of a shell element, for example

 <ShowIf condition={this.state.something}> <div> Some text </div> </ShowIf> 

But I'm looking for something like this

 <div doThisIf={this.state.something}> Some text </div> 

I came across React templates from Wix.com, but this is a transpiler. I am looking for a one-stop solution.

It may be against React practice, but it really makes the situation easier. Any suggestions?

Answer 1

Instead of trying to make components for this, add a condition before your application's render method return as follows:

 React.createClass({ //... some other stuff render: function () { var something; if (this.state.something) { something = ( <span onClick={this.handleClick}> Some React stuff here... </span> ); } return ( <div> <h1>Something</h1> <p>Any other stuff here...</p> {/* This only shows up if `this.state.something` is true: */} {something} </div> ) } }); 

If the variable returns null / undefined , it will not be displayed, and HTML will not be created for it.