如何在一个反应组件传递到另一个反应组件，以穿透第一个组件的内容?

有没有办法将一个组件传递给另一个react组件?我想创建一个模型react组件，并传入另一个react组件，以透光该内容。

编辑:这里是一个reactJS代码，说明了我正在尝试做什么。http://codepen.io/aallbrig/pen/bEhjo

HTML

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

反应

/**@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'));

当前回答

你可以通过传入一个组件。道具和渲染它与插值。

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

然后你将传入一个名为child的道具，它将是一个React组件。

2014-09-12 00:52:33

其他回答

让我们创建一个包装器组件:

export const Wrapper = (props) => {
    return(<>
        <Menu />
        {props.children}
        <Footer />
        </>
    )
}

现在可以将新结构包含到现有结构中。你需要将组件包含在一个路由中，例如:

 <Route path="/"  element={<Wrapper><ExampleComponent /></Wrapper>} />

2022-03-15 20:04:20

您可以将组件作为道具传递，并使用与使用组件相同的方式。

function General(props) {
    ...
    return (<props.substitute a={A} b={B} />);
}

function SpecificA(props) { ... }
function SpecificB(props) { ... }

<General substitute=SpecificA />
<General substitute=SpecificB />

2021-02-07 01:21:53

虽然有点晚了，但这里有一个强大的HOC模式，可以通过将组件作为道具来覆盖组件。它简单而优雅。

假设MyComponent呈现了一个虚构的a组件，但您希望允许自定义重写a，在本例中为B，它将a包装在<div>…</div>，并将“!”附加到文本道具:

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);

2019-03-27 15:49:45

你可以使用this.props.children来呈现组件包含的任何子元素:

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

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

2014-09-12 11:37:02

你可以通过传入一个组件。道具和渲染它与插值。

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

然后你将传入一个名为child的道具，它将是一个React组件。

2014-09-12 00:52:33

如何在一个反应组件传递到另一个反应组件，以穿透第一个组件的内容?

推荐文章

最新文章

标签