Question

我正在寻找一种方法将反应作为参数传递给其他反应并访问它：我尝试过类似的事情：

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

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

编辑在纠正一些语法错误后，我得到：

: Unexpected token指向<

处的符号[{<someOtherReactFunction时出错

非常感谢任何帮助。

Answer 1

以下是构建代码的方法：

var SomeOtherReactComponent = React.createClass({
  propTypes: {
    someParam: React.PropTypes.string.isRequired
  },
  render: function() {
    var tabContent;
    if(this.props.someParam === '') {
      tabContent = "Oh no, this tab is empty!"
    } else {
      tabContent = this.props.someParam;
    }

    return (
      <div>
        {tabContent}
      </div>
    );
  }
});

var SomeReactComponent = React.createClass({
  propTypes: {
    param1: React.PropTypes.array,
    param2: React.PropTypes.string
  },
  getDefaultProps: function() {
    return {
      param1: ['test', 'test1'],
      param2: ''
    };
  },
  render: function() {
    return (
      <div>
        {'This is someReactComponent. Below me is someOtherReactComponent.'}
        <SomeOtherReactComponent someParam={this.props.param2} />
      </div>
    );
  }
});

ReactDOM.render(<SomeReactComponent param2={'Awesome Tab Content'} />, document.getElementById('someDiv'));

您的组件可能非常动态。渲染可以包含逻辑，它不需要是静态视图。它只需要我们＆＃34;纯＆＃34;，它在React世界中意味着确定性：给一个组件相同的道具/状态，每次它应该给你相同的渲染输出。

Answer 2

这可能不是最佳做法，但绕过了我想做的事情：

将内部反应组件作为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组件添加了更多动态功能。这是最好的做法吗？ Probaly不是......但是，正在帮助我实现我想要实现的目标......如果任何人有更好的解决方案，请指出我。

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

2 个答案: