Question

我是新来的反应者。我认为这是一个非常基本的问题，但我被困在这里，就像

我创建了一个看起来像->

的组件

import React from 'react';

class CreateNumberOfQuestion extends React.Component {
  render() {
    let options = [];
    for (let i = 0; i <= this.props.noc - 1; i++) {
      return "<option key=" + i + ">" + i + "</option" >
        options.push(option);
    }
    return options;
  }
}

export default CreateNumberOfQuestion;

所以，在这里，我正在diff组件中使用它，

<select
  className="numberDropdown selectpicker btn btn-labeled btn-start selectId quesSDrop margin-left-10"
  onChange={(e) => { props.onChange(e, "count", props.data.id) }}
>
  <option disabled selected value>None</option>
  {props.noc && <CreateNumberOfQuestion noc={props.noc}/>}
</select>

所以，我有点困惑，如何使用它，就像它没有呈现该元素一样，所以，这里得到一个数字，所以据此我创建了许多元素，所以，我做错了什么吗？？

Answer 1

问题：

1-您将返回字符串数组而不是JSX元素数组。

2-您在循环内部使用return，这会破坏循环。

将JSX推入array并最终返回该数组，如下所示：

let options = [];
for (let i = 0; i <= this.props.noc - 1; i++) {
   options.push(<option key={i}>i</option>)
}

Answer 2

<select className="numberDropdown selectpicker btn btn-labeled btn-start selectId quesSDrop margin-left-10" onChange={(e) => { props.onChange(e, "count", props.data.id) }}>
    <option disabled selected value>None</option>
    {props.noc && props.noc.map((noc, count) => (<option noc={noc} key={count}> {count} </option>))} 
</select>

Answer 3

React documentation中的隐峰可以解决您的问题:-)。在这种情况下，您的组件应返回“ noc”的地图聚合。

在不同组件中使用一系列选项反应

3 个答案: