如何将一个反应组件传递到另一个反应组件中以超越第一个组件的内容？运行时包装器：初始化包装器/HOC

javascript reactjs

2022-08-30 00:26:31

有没有办法将一个组件传递给另一个反应组件？我想创建一个模型 react 组件并传入另一个 react 组件，以便超越该内容。

编辑：这是一个reactJS代码笔，说明了我正在尝试做的事情。http://codepen.io/aallbrig/pen/bEhjo

断续器

<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'));

答案 1

您可以使用来渲染组件包含的任何子级：this.props.children

const Wrap = ({ children }) => <div>{children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>

答案 2

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

运行时包装器：

这是最惯用的方式。

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 中的一个“特殊道具”，上面的例子是语法糖，（几乎）等同于children<Wrapper children={<App/>}/>

初始化包装器/HOC

您可以使用高阶分量（HOC）。它们最近已添加到官方文档中。

// 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);

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

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

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

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

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