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

Question

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

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

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

EDIT 纠正一些语法错误后我得到：

: Unexpected token 指向符号 < at [{<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'));

您的组件可以非常动态。渲染可以有逻辑，它不需要是静态视图。它需要的只是我们 "pure"，这在 React 世界中意味着确定性：给一个组件相同的 props/state 并且每次它应该给你相同的渲染输出。

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

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

Pass a React component as a param to another React component

parameter-passing

jsx

reactjs