Question

我正在尝试在没有选择的情况下渲染React元素的选项。 Ho可以做到这一点。这段代码同时呈现select和option元素。在我的应用程序中，我使用AngularJs指令绑定选项，以便复制选择视图。我怎么能这样做？

return React.createElement('select',
    timeSheet.map(function (time, index) {
        var option = React.createElement('option', { value: time.value, key: index, label: time.lable, className: 'md-option' });
        return option;
      })
  )

AngularJs指令。

angular.directive('timePicker', function () {
  return {
    restrict: 'A',
    scope: {
      ngValue: '='
    },
    link: function (scope, el, attrs) {
      scope.$watch('ng-value', function (newValue, oldValue) {
        var MyComponent = React.createFactory(GRID);
        console.log(el[0])
        ReactDOM.render(
          MyComponent(),
          el[0]

        );
      })
    }
  }
})

可以在此链接问题中找到React类。GRID

感谢。

Answer 1

如果你只是想在一个select指令中添加选项元素，你正在以angular形式创建它，那么只需将选项渲染到你的select指令元素中......

angular.module('myApp')
  .directive('mySelectDirective', function($compile){
    return {
      template: '<md-select ng-model="someModel"></md-select>',
      link: function(scope, element, attr) {

        var options = timeSheet.map(function (time, index) {
          return React.createElement('option', { value: time.value, key: index, label: time.lable, className: 'md-option' });
        });

        // append the React components to your select directive
        ReactDOM.render(options, element[0]);

        // apply Angular bindings to new elements
        $compile(element)(scope);
      }
    }
  })

此外，您仍需要更新React.createElement上的签名以匹配(component, props, ...children)。（有关详细信息，请参阅React Without JSX）

添加null作为第二个arg：

return React.createElement('select',
    null,
    timeSheet.map(function (time, index) {
        var option = React.createElement('option', { value: time.value, key: index, label: time.lable, className: 'md-option' });
        return option;
    })
)

在ReactJs中渲染选项

1 个答案: