Right to left (RTL) support in React

问题

What would be the best way to implement RTL support in React apps? Is there a way to override default <p> and <span> tags (components) to add RTL support so that I don't have to rewrite components I already wrote to have RTL support? (for example, to have some global variable window.RTL, so when set to true to have all <p> and <span> tags flip text direction to RTL). I could probably change the build system, or make a babel plugin, that will replace all React.createElement("p" ...) with my own implementation of a p tag, but is there a better solution?

Thanks.

回答1:

A more optimal way is to use CSS / HTML abilities for that:

direction CSS property
Unicode symbols &rlm; / &lrm;
Attach .rtl / .ltr classes to body and use them to change order

In that cases order of your elements in HTML are the same for RTL and LTR. The difference in applied CSS rules.

If you really need the order of elements in React, you can create own component that reverses the list of children if RTL:

const Dir = React.createClass({
  render: function() {
    let children = (this.props.direction == 'rtl' && this.props.children && this.props.children.reverse) ? this.props.children.reverse() : null;
    return <div>
      { children }
    </div>;
  }
});

// And use as:
// directionVariable = 'rtl'|'ltr'
<Dir direction={ directionVariable }>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
</Dir>

回答2:

Simple and easy, Just set dir attribute of <html> in index.js as follow:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

//HERE ->
document.getElementsByTagName('html')[0].setAttribute("dir", "rtl");
//Or you can do it where ever you want, base on user selected language, or something else 
serviceWorker.unregister();

UPDATE: If your application is RTL at all, just add dir="rtl" in <html> tag, but if user can chose different languages that may be RTL or LTR you can do it like above example, and handle other things with CSS...

Just check User chosen language is RTL and document.getElementsByTagName('html')[0].setAttribute("dir", "rtl"); let CSS handle appearance stuff.

来源：https://stackoverflow.com/questions/34899513/right-to-left-rtl-support-in-react

标签

javascript

reactjs

right-to-left