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

Question

我的场景是，我在 Controller (与 React 无关)中创建一个 render() 函数，以使用指定布局的选项来渲染 View 。这样我就可以拥有多个不同的布局组件，所有组件都接受内容属性，并且可以以简单的方式呈现。简而言之，这就是我想做的事情:

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 的原始技术code> 和 this.props.content 工作得很好。 ( JSFiddle example : http://jsfiddle.net/BinaryMuse/b5ncfnqh/ )