我正在寻找一种将反应作为参数传递给其他反应并对其进行访问的方法:我已经尝试过类似的方法:
ReactDOM.render(
<someReactFunction
param1={['test','test1']}
param2={[{<someOtherReactFunction someParam={testParam || ''} />}]}
/>,
document.getElementById('someDiv'));
但是我得到的JSX值应该是表达式或指向JSX的引用文本 document.getElementById('someDiv')
编辑纠正一些语法错误后,我得到:
: Unexpected token
指向处的符号<
时出错[{<someOtherReactFunction
任何帮助是极大的赞赏。
这可能不是最佳做法,但可以绕开我想做的事情:
将内部react组件作为传递value
给具有一些命名空间的对象,property
例如:
ReactDOM.render(
<someReactFunction
param1={['test','test1']}
// `_treatAsComponent` is my specific name spaced key
param2={[{'_treatAsComponent' : <someOtherReactFunction someParam={testParam || ''} />}]}
/>,
document.getElementById('someDiv'));
然后在someReactFunction
函数中遍历数组,然后执行以下操作:
var SomeReactComponent = React.createClass({
propTypes: {
param1: React.PropTypes.array,
param2: React.PropTypes.arrayOf(React.PropTypes.object).isRequired
},
render: function() {
// since I have only one element I access it directly else you can loop over it if you have multiple arguments
//now check the key to determine action to take
if(param2[0]._treatAsComponent) {
return (<div>{item[key]}</div>);
}
else if(param2[0]._treatAsHTML) {
return (<div dangerouslySetInnerHTML={{__html: param2[0]._treatAsHTML}}></div>);
}
else{
return(//some default handling or errors);
}
});
这样,我为给定的UI组件添加了更多动态功能。这是最佳做法吗?可能不是...但是,它正在帮助我努力实现的目标。.如果有人有更好的解决方案,请指出。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句