如何将反应组件传递到另一个反应组件以转换第一个组件的内容？

Question

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

编辑:这是一个reactJS codepen,说明我正在尝试做什么.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'));

Answer 1

您可以使用它this.props.children来呈现组件包含的任何子项:

const Wrap = props => <div>{props.children}</div>

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

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

请注意,这children是React中的"特殊道具",上面的示例是语法糖,并且(几乎)等效于<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);

这可以导致(小)更好的性能,因为包装器组件可以使用shouldComponentUpdate将渲染缩短一步,而在运行时包装器的情况下,子prop可能总是不同的ReactElement并导致重新渲染即使您的组件扩展PureComponent.

请注意,connectRedux曾经是一个运行时包装器,但被更改为HOC,因为它允许在使用该pure选项时避免无用的重新呈现(默认情况下为true)

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

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

更多解释:https://stackoverflow.com/a/31564812/82609

Answer 3

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

Answer 4

Facebook推荐无状态组件使用来源:https://facebook.github.io/react/docs/reusable-components.html

在理想情况下,大多数组件都是无状态函数,因为将来我们还可以通过避免不必要的检查和内存分配来对这些组件进行性能优化.如果可能,这是推荐的模式.

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);

Answer 5

我更喜欢使用React内置API:

import React, {cloneElement, Component} from "react";
import PropTypes from "prop-types";

export class Test extends Component {
  render() {
    const {children, wrapper} = this.props;
    return (
      cloneElement(wrapper, {
        ...wrapper.props,
        children
      })
    );
  }
}

Test.propTypes = {
  wrapper: PropTypes.element,
  // ... other props
};

Test.defaultProps = {
  wrapper: <div/>,
  // ... other props
};

然后你可以用你想要的东西替换包装div:

<Test wrapper={<span className="LOL"/>}>
  <div>child1</div>
  <div>child2</div>
</Test> 

Answer 6

您可以将其作为常规道具传递： foo={<ComponentOne />}

例如：

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>

Answer 7

您可以通过传入组件。道具并通过插值渲染。

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

然后，您将传入一个prop称为child，这将是一个React组件。