如何将属性添加到作为变量传递的反应组件？

Question

我的场景是我在控制器（与 React 无关）中创建一个 render() 函数来渲染带有指定布局选项的视图。这样我就可以拥有多个不同的布局组件，所有组件都接受可以以简单方式呈现的内容属性。简而言之，这是我要尝试做的事情：

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 (or, in v0.13 RC2 and later, 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/)

如何将属性添加到作为变量传递的反应组件？

How can I add properties to a react component passed as a variable?

reactjs