在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

謝謝。

來源

2017-08-31 Mohamed Nizar

你能告訴你的角碼？此外，這可能是一個可怕的想法，因爲你正在管理狀態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; 
    }) 
)

來源

2017-08-31 05:26:30

第一個解決方案將錯誤作爲無效元素拋出，第二個解決方案不像我期望的那樣處理。但是它給了更多理解我的問題。謝謝@Julian Soro –

好吧，看到你的GRID代碼，第一部分將不會工作，因爲選擇是由React再次做出的... –

我在'我的角度材料中選擇'作爲'md- select'。我想保留它，並使用反應將選項追加到md-select，因爲在這種情況下，Angular需要更多時間來渲染。 –

在ReactJs中渲染選項

回答

相關問題