在ReactJs中渲染选项

问题描述：

我试图渲染React元素的选项而没有选择。何可以做到这一点。此代码呈现选择元素和选项元素。在我的应用程序中，我使用AngularJs指令绑定选项，以便它复制选择视图。我怎样才能做到这一点？在ReactJs中渲染选项

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

谢谢。

你能告诉你的角码？此外，这可能是一个可怕的想法，因为你正在管理状态2非常不同（角度指令和反应组件） –

答

如果你只是想增加一个选择指令，其中创建在角内选择要素，然后只是渲染选项加入到你的选择指令元素...

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; 
    }) 
)

第一个解决方案将错误作为无效元素抛出，第二个解决方案不像我期望的那样处理。但是它给了更多理解我的问题。谢谢@Julian Soro –

好吧，看到你的GRID代码，第一部分将不会工作，因为选择是由React再次做出的... –

我在'我的角度材料中选择'作为'md- select'。我想保留它，并使用反应将选项追加到md-select，因为在这种情况下，Angular需要更多时间来渲染。 –

在ReactJs中渲染选项

相关推荐