将一个React组件作为参数传递给另一个React组件

尼山斯·玛塔(Nishanth Matha)

我正在寻找一种将反应作为参数传递给其他反应并对其进行访问的方法:我已经尝试过类似的方法:

ReactDOM.render(
  <someReactFunction 
    param1={['test','test1']} 
    param2={[{<someOtherReactFunction someParam={testParam || ''} />}]} 
  />, 
  document.getElementById('someDiv'));

但是我得到的JSX值应该是表达式或指向JSX的引用文本 document.getElementById('someDiv')

编辑纠正一些语法错误后,我得到:

: Unexpected token指向处的符号<出错[{<someOtherReactFunction

任何帮助是极大的赞赏。

尼山斯·玛塔(Nishanth Matha)

这可能不是最佳做法,但可以绕开我想做的事情:

将内部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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Ember.js如何将一个组件作为参数传递给另一个组件?

来自分类Dev

Ember.js如何将一个组件作为参数传递给另一个组件?

来自分类Dev

如何将组件作为道具传递给 react js 中的另一个组件?

来自分类Dev

将Styled组件作为className传递给另一个组件

来自分类Dev

React-如何将状态传递给另一个组件

来自分类Dev

如何将状态className变量传递给React中的另一个组件

来自分类Dev

React Native-将状态传递给另一个组件

来自分类Dev

将属性传递给另一个组件-React

来自分类Dev

React JS将click事件传递给另一个组件

来自分类Dev

React似乎没有将道具传递给另一个组件

来自分类Dev

如何将表单输入字段传递给 React 中的另一个组件?

来自分类Dev

React 将获取的数据传递给另一个组件

来自分类Dev

如何将唯一ID作为道具传递给另一个组件

来自分类Dev

React Native - 将数据从一个组件传递到另一个

来自分类Dev

如何将图像 url 作为道具传递给另一个组件?

来自分类Dev

如何将数组从 api 作为道具传递给另一个组件

来自分类Dev

将样式化的组件作为子组件传递给另一个组件会引发错误

来自分类Dev

将道具从组件传递到React上的另一个组件

来自分类Dev

React:如何将State值传递给另一个组件并使用它来呈现一个组件

来自分类Dev

从另一个组件获取参数[React JS]

来自分类Dev

React-如何将API数据从一个组件传递到另一个js文件中的另一个组件?

来自分类Dev

如何将翻译后的字符串传递给react-jhipster中的另一个组件?

来自分类Dev

将一个方法作为参数传递给另一个方法

来自分类Dev

将一个方法作为参数传递给另一个方法

来自分类Dev

将组件的引用传递给ReactJS中的另一个组件

来自分类Dev

组件如何将道具传递给另一个组件?

来自分类Dev

从另一个组件调用时将 className 传递给子组件

来自分类Dev

如何通过 props 将组件传递给另一个组件

来自分类Dev

如何将数据传递给组件到另一个组件

Related 相关文章

  1. 1

    Ember.js如何将一个组件作为参数传递给另一个组件?

  2. 2

    Ember.js如何将一个组件作为参数传递给另一个组件?

  3. 3

    如何将组件作为道具传递给 react js 中的另一个组件?

  4. 4

    将Styled组件作为className传递给另一个组件

  5. 5

    React-如何将状态传递给另一个组件

  6. 6

    如何将状态className变量传递给React中的另一个组件

  7. 7

    React Native-将状态传递给另一个组件

  8. 8

    将属性传递给另一个组件-React

  9. 9

    React JS将click事件传递给另一个组件

  10. 10

    React似乎没有将道具传递给另一个组件

  11. 11

    如何将表单输入字段传递给 React 中的另一个组件?

  12. 12

    React 将获取的数据传递给另一个组件

  13. 13

    如何将唯一ID作为道具传递给另一个组件

  14. 14

    React Native - 将数据从一个组件传递到另一个

  15. 15

    如何将图像 url 作为道具传递给另一个组件?

  16. 16

    如何将数组从 api 作为道具传递给另一个组件

  17. 17

    将样式化的组件作为子组件传递给另一个组件会引发错误

  18. 18

    将道具从组件传递到React上的另一个组件

  19. 19

    React:如何将State值传递给另一个组件并使用它来呈现一个组件

  20. 20

    从另一个组件获取参数[React JS]

  21. 21

    React-如何将API数据从一个组件传递到另一个js文件中的另一个组件?

  22. 22

    如何将翻译后的字符串传递给react-jhipster中的另一个组件?

  23. 23

    将一个方法作为参数传递给另一个方法

  24. 24

    将一个方法作为参数传递给另一个方法

  25. 25

    将组件的引用传递给ReactJS中的另一个组件

  26. 26

    组件如何将道具传递给另一个组件?

  27. 27

    从另一个组件调用时将 className 传递给子组件

  28. 28

    如何通过 props 将组件传递给另一个组件

  29. 29

    如何将数据传递给组件到另一个组件

热门标签

归档