Question

我正在使用React.PureComponent在几个嵌套组件中创建几十个选择列表。对于此示例，假设this.props.options如下所示：

[
    "",
    "01 - Jan",
    "02 - Feb",
    "03 - Mar",
    "04 - Apr",
    "05 - May",
    "06 - Jun",
    "07 - Jul",
    "08 - Aug",
    "09 - Sep",
    "10 - Oct",
    "11 - Nov",
    "12 - Dec"
];

这是我的PureComponent：

class SelectElement extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            optionList: []
        };
    }
    render() {
        try {
            this.props.options.forEach(option =>
                this.state.optionList.push(new Option(option, option))
            );
        } catch (e) {
            console.log("optionList is a : " + typeof (this.state.optionList));
            console.log("Exposing optionList globally!");
            GLOBALOPTIONLIST = this.state.optionList;
        } 
        return (
            <React.Fragment>
                <select className="form-control" name={this.props.inputName}>
                    // this just shows [object HTMLOptionElement]
                    {this.state.optionList.toString()}
                    // this throws an error "Objects are not valid as a React child"
                    {this.state.optionList}
                </select>
            </React.Fragment>
        );
    }
}

我是否错误地使用new Option(option, option)？我也尝试过原始字符串替换，例如：

this.state.optionList.push(`<option value={option}>{option}</option>`)

但是这会在DOM中的select标签内呈现一个字符串...

Answer 1

这看起来很愚蠢，但确实有效：

this.state.optionList.push(<OptionElement value={option} text={option}/>)


class OptionElement extends React.PureComponent {
    constructor(props) {
        super(props);
    }
    render() {
        return(  
            <option value={this.props.value}>{this.props.text}</option>
        );
    }
}

很想知道是否有更好的方法。

Answer 2

您是否尝试将选项元素推入阵列？

this.props.options.forEach(option =>
  const optionElement = <option value={option}>{option}</option>;
  this.state.optionList.push(option);
);

然后使用{this.state.optionList}渲染它们。

迭代地添加<option>元素以在React中选择列表

2 个答案: