Geek Answers Handbook

ReactJS: text alignment not working

I used text-align: justify to evenly distribute the menu. Following this tutorial , it works great.

However, it breaks when I use ReactJS to create the view. A comparison can be found here: http://jsfiddle.net/j7pLprza/1/ . I use these two simple components to populate the menu:

 var MenuItem = React.createClass({ render: function() { return ( <li> {this.props.title} </li> ); } }); var TopMenus = React.createClass({ render: function() { return ( <div className="break"> <nav> <ul> {this.props.menus.map(function(menu) { return (<MenuItem title={menu.title} />); })} </ul> </nav> </div> ); } });

After researching, I think this is caused by ReactJS, which removes all lines and spaces after the <li> elements. This will disable text-align: justify .

This also happens for AngularJS (but I can fix it using the add-space-all directive).

I only reached this problem after googling: https://github.com/facebook/jsx/issues/19 . But I quickly got lost.

I tried to add additional content, for example {'\n'} and {' '} , but ReactJS reports syntax errors.

Please, help. Thanks.

UPDATE 1:

After the accepted answer, my menus work in Chrome Emulator. However, when I visit the iPhone 5c (Chrome browser), the result looks as if the extra space is not recognized.

After doing various combinations, this works:

 var TopMenus = React.createClass({ render: function() { return ( <div className="break"> <nav> <ul> {this.props.menus.map(function(menu) { return [(<MenuItem title={menu.title} />), '&nbsp; ']; })} </ul> </nav> </div> ); } });

Note that the extra space in &nbsp; necessary. Missing either &nbsp; either .

It works then on Nexus 7, iPhone 5c (Chrome and Safari). However, I do not know the exact reason. If anyone knows, please help.

UPDATE 2:

Still buggy. So I switched to Flex layout . And it is very easy. For example: http://jsfiddle.net/j7pLprza/4/

+5
source share
1 answer

In this case, the reaction does not delete, because in the first place there are no spaces between the elements. If you want to add spaces between li elements, you can interleave the array with ' ' . In this case, it is as simple as returning an array from the .map function (arrays are smoothed):

 var TopMenus = React.createClass({ render: function() { return ( <div className="break"> <nav> <ul> {this.props.menus.map(function(menu) { return [<MenuItem title={menu.title} />, ' ']; })} </ul> </nav> </div> ); } });

Example: https://jsfiddle.net/j7pLprza/2

+9
source

More articles:


All Articles