如何将反应组件传递到另一个反应组件以转换第一个组件的内容？ [英] How to pass in a react component into another react component to transclude the first component's content?

问题描述

有没有办法将一个组件传递到另一个反应组件？我想创建一个模型反应组件并传入另一个反应组件以转换该内容。

Is there a way to pass one component into another react component? I want to create a model react component and pass in another react component in order to transclude that content.

编辑：这是一个reactJS codepen，说明我正在尝试做。 http://codepen.io/aallbrig/pen/bEhjo

Here is a reactJS codepen illustrating what I'm trying to do. http://codepen.io/aallbrig/pen/bEhjo

HTML

<div id="my-component">
    <p>Hi!</p>
</div>

ReactJS

/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
      <div>
        <p> Added title </p>
        {this.props.children}
      </div>
    )
  }
});

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

推荐答案

注意我提供了更深入的答案这里

Note I provided a more in-depth answer here

这是最惯用的方式。

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

请注意孩子是一个特殊道具 在React中，上面的示例是语法糖，并且（几乎）等同于< Wrapper children = {< App />} />

Note that children is a "special prop" in React, and the example above is syntactic sugar and is (almost) equivalent to <Wrapper children={<App/>}/>

您可以使用高阶组件（HOC）。它们最近被添加到官方文档中。

You can use an Higher Order Component (HOC). They have been added to the official doc recently.

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

这可以带来（小）更好的性能，因为包装器组件可以使渲染短路一步使用shouldComponentUpdate，而在运行时包装器的情况下，子prop可能总是不同的ReactElement并导致重新渲染，即使你的组件扩展PureComponent。

This can lead to (little) better performances because the wrapper component can short-circuit the rendering one step ahead with shouldComponentUpdate, while in the case of a runtime wrapper, the children prop is likely to always be a different ReactElement and cause re-renders even if your components extend PureComponent.

请注意，Redux的 connect 曾经是一个运行时包装器，但已更改为HOC，因为如果使用，它允许避免无用的重新呈现pure 选项（默认情况下为true）

Notice that connect of Redux used to be a runtime wrapper but was changed to an HOC because it permits to avoid useless re-renders if you use the pure option (which is true by default)

在渲染阶段永远不应该调用HOC，因为创建React组件可能很昂贵。您应该在初始化时调用这些包装器。

You should never call an HOC during the render phase because creating React components can be expensive. You should rather call these wrappers at initialization.

请注意，使用上述功能组件时，HOC版本不提供任何有用的优化，因为无状态功能组件没有实现 shouldComponentUpdate

Note that when using functional components like above, the HOC version do not provide any useful optimisation because stateless functional components do not implement shouldComponentUpdate

这里有更多解释：https://stackoverflow.com/a/31564812/82609

这篇关于如何将反应组件传递到另一个反应组件以转换第一个组件的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！