如何将字符串点表示法转换为对象引用，而不是嵌套

Question

我在react 中映射一个数组以获取jsx <label> 和<input> 的列表，但每个元素都有自己的与结果元素匹配的样式。如何将字符串名称转换为对象引用？

render() {

    const elements = this.props.elements;
    console.log('render ' + this.props.selected)
    const elementList = elements.map(**elem** => (
        < div key={elem} className={styles.Inputs} >
            <label className={styles.{**elem**}}>
                <span className={this.state.selected === elem ? styles.red : styles.gray}></span>
                <input
                    type="radio"
                    name="react-tips"
                    value={elem}
                    extra={this.state.selected}
                    checked={this.state.selected === elem}
                    onChange={this.handleOptionChange}
                    className="form-check-input"
                />
            </label>
        </div >
    ))
    return (
        <div>
            {elementList}
        </div>

    )

Answer 1

问题解决了伙计们。我只是使用标准的 css 导入文件来跳过 css 模块中的点表示法，虽然不完美但工作得很好。谢谢大家

import React, { Component } from 'react';
import styles from './InputsRadio.module.css';
import './styles.css';

export default class List extends Component {

    state = {
        elements: [],
        selected: null
    }
    state = {

    };
    handleOptionChange = event => {
        this.setState({
            selected: event.target.value
        });
    };
    componentDidMount() {
        const selected = this.props.selected;
        this.setState({
            selected: selected
        });
    }



    render() {

        const elements = this.props.elements;
        console.log('render ' + this.props.selected)
        const elementList = elements.map(elem => (
            < div key={elem} className={styles.Inputs} >
                {console.log(styles[elem])}
                <label className={styles.Inputs}>
                    <span className={this.state.selected === elem ? `${elem} ${styles.red}` : `${elem} ${styles.gray}`}></span>
                    <input
                        type="radio"
                        name="react-tips"
                        value={elem}
                        extra={this.state.selected}
                        checked={this.state.selected === elem}
                        onChange={this.handleOptionChange}
                        className="form-check-input"
                    />
                </label>
            </div >
        ))
        return (
            <div>
                {elementList}
            </div>

        )

    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

如果要设置对象属性并动态获取值，可以使用 []（第三个括号）代替 .（点）。在你的情况下应该是

<label className={styles[**elem**]}> 

举个例子，假设你有一个像这样的对象

let obj = {
  1: 'One',
  2: 'Two',
  3: 'Three'
}

如果你想使用循环动态获取值（只是一个例子），你可以这样获取它

for(let i = 1; i <= Object.keys(obj).length; i++) {
  console.log(obj[i]);
}
// Output
// 'One'
// 'Two'
// 'Three'

Answer 3

你可以这样做，

<label className={styles[**elem**]}> 

Answer 4

// To convert Object to String
let str = JSON.stringify(object); // Object could be Array or an Custom Object

// To convert  String back to Object
object = JSON.parse(str);

如果我误解了这个问题，希望这有助于告诉我