Question

我正在使用rails和react-js，所以我在这里尝试生成这样的选择标记：

  import { form, input, button, span, div,select } from 'r-dom';
  const keywordInput = select({
      name: 'category',
      className: css.keywordInput,
      options: {[
                 {value: 'one', label: 'One'},
                 {value: 'two', label: 'Two'}
               ]}
    });

但是，这也不会在select标签内生成选项。任何帮助将不胜感激。

Answer 1

所以这有点晚了，但是由于我也花了1个小时努力解决这个问题，而且r-dom文档（see here）简明扼要，所以是：

以通用方式，r-dom将根据您的编码生成html标签。每个html标签都必须是一个r-dom对象。在HTML中，<select>标记包含<option>标记。示例：

<select>
  <option value="km">KM</option>
  <option value="miles">Miles</option>
</select>

这意味着在r-dom中，您需要创建select({})对象，还需要创建option({})对象，每个选项一个，然后将它们作为select的子代传递宾语。 r-dom文档（请参见上面的链接）提示了以下synthax：

myComponent = component([properties], [children])

对于构建<select>标签的显式示例，以下是通过上述示例构建列表的两种类似方法（请注意，由于option是r-dom对象，因此您还需要导入）：

import {select, option} from 'r-dom'

const unitOptionKm = option({
  value: "km",
  label: "KM"
});
const unitOptionMiles = option({
  value: "miles",
  label: "Miles"
});
const selectUnitList = select({
  defaultValue: "km"
},[
  unitOptionKm,
  unitOptionMiles
]);

您可以使用较短的代码，结果如下：

import {select, option} from 'r-dom'

const selectUnitList = select({
  defaultValue: "km"
},[
  option({value: "km",label: "KM"}),
  option({value: "miles",label: "Miles"})
]);

最后，使用r-dom时，我们必须了解它在html中的用法，并且每个标签必须声明为r-dom对象，并作为其父标签的子代传递。

如何在react js中使用r-dom传递select标签中的选项

1 个答案: