Блог

В React возможно ли динамически изменять часть имени переменной в зависимости от состояния?

Например, я передаю информацию о нескольких компонентах из файла JSON. В зависимости от выбранного пола (мужской или женский), я хочу отправить ‘atlas’ либо из «male_clothes.js «или «female_clothes.js «.

JSX-код:

 class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            current_gender: "male",
            current_pants: 0,
        }
<LimbSegment atlas={male_clothes[this.state.current_pants]['atlas']}/>
  

 const { current_pants, gender } = this.state // I assume gender is comming from the state
const clothes = gender === 'male' ? male_clothes : female_clothes
const atlas = clothes[current_pants].atlas
// Then:
<LimbSegment atlas={atlas}/>
  

не уверен, правильно ли я вас понял. Итак, если state.gender есть male , он будет использовать male_clothes в противном случае female_clothes

 <LimbSegment atlas={this.state.gender === 'male' ? 
male_clothes[this.state.current_pants]['atlas'] : 
female_clothes[this.state.current_pants]['atlas']}/>
  

Короткий:

 <LimbSegment atlas={(this.state.someFlag ? male_clothes : female_clothes)[this.state.current_pants]['atlas']}/>
  

Но лучше использовать более подробный подход:

 const clothes = this.state.someFlag ? male_clothes : female_clothes;
...
<LimbSegment atlas={clothes[this.state.current_pants]['atlas']}/>