Question

我的场景是我在控制器中创建了一个render（）函数（而不是与React相关），可以通过指定布局来呈现视图。这样我可以有多个不同的布局组件，都接受内容属性，可以以简单的方式呈现。这就是我简单地尝试做的事情：

render: function(content, layout) {
    layout = layout || <Layout />;
    layout.setProps({ content: content });
    React.render(layout, document.body);
}

可以吗？或者，如果您认为可以做到但这不是一个坏主意，请告诉我原因。

Answer 1

有几种方法可以解决这个问题。

最简单的方法是分别传递布局的类型和属性：

function render(content, layoutType, layoutProperties) {
  layoutType = layoutType || Layout;
  layoutProperties = layoutProperties || {};

  var props = { content: content };
  for (var key in layoutProperties) {
    props[key] = layoutProperties[key];
  }

  var layout = React.createElement(layoutType, props);

  React.render(layout, document.body);
}

render(<div>Test 1</div>);
render(<div>Test 2</div>, CustomLayout, { title: "Test Title" });

^{JSFiddle example：http://jsfiddle.net/BinaryMuse/hjLufbkz/}

如果您希望将完全实现的ReactElement作为布局传递，则可以使用React.addons.cloneWithProps（或者，在v0.13 RC2及更高版本中，React.cloneElement）：

function render(content, layout) {
  var props = { content: content };
  layout = layout || <Layout />;
  layout = React.addons.cloneWithProps(layout, props);

  React.render(layout, document.body);
}

render(<div>Test 1</div>);
render(<div>Test 2</div>, <CustomLayout title="Test Title" />);

^{JSFiddle example：http://jsfiddle.net/BinaryMuse/8krawhx4/}

我非常喜欢使用this.props.children来嵌套元素;请注意，您可以修改上述两种技术：

function render(content, layoutType, layoutProperties) {
  layoutType = layoutType || Layout;
  layoutProperties = layoutProperties || {};

  var layout = React.createElement(layoutType, layoutProperties, content);

  React.render(layout, document.body);
}

^{JSFiddle example：http://jsfiddle.net/BinaryMuse/6g8uyfp4/}

和

function render(content, layout) {
  layout = layout || <Layout>{content}</Layout>;
  layout = React.addons.cloneWithProps(layout, {children: content});

  React.render(layout, document.body);
}

^{JSFiddle example：http://jsfiddle.net/BinaryMuse/nadv297h/}

当然，如果您的某个自定义布局组件已将this.props.children用于其他目的，则使用cloneWithProps / cloneElement和this.props.content的原始技术可以正常工作。（JSFiddle example：http://jsfiddle.net/BinaryMuse/b5ncfnqh/）

如何向作为变量传递的react组件添加属性？

1 个答案: