Javascript 如何将一个react组件传入另一个react组件以排除第一个组件'；什么内容？

是否有办法将一种成分传递到另一种成分？我想创建一个模型react组件，并传入另一个react组件，以便排除该内容

编辑：这里有一个代码笔，说明了我正在尝试做什么

HTML

嗨

反应

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

/**@jsx React.DOM*/
var BasicTransclusion=React.createClass({
render:function（）{
//下面的“添加标题”应该是Hi的子内容

返回(
附加标题

{this.props.children}
)
}
});
React.renderComponent（BasicTransclusion（），document.getElementById（'my-component'）；

您可以通过传入组件。绘制道具并使用插值进行渲染

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

var DivWrapper=React.createClass({
render:function（）{
返回{this.props.child}；
}
});

---

然后，您将传入一个名为

child

的

prop

，它将是一个React组件。

您可以使用

this.props.children

来渲染组件包含的任何子组件：

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

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

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

const Wrap=（{children}）=>{children}
导出默认值（）=>Hello word

注：我提供了一个更深入的答案

运行时包装器： 这是最惯用的方式

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

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

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

这可能会导致（很少）更好的性能，因为包装器组件可以通过shouldComponentUpdate提前一步缩短渲染，而在运行时包装器的情况下，子属性可能始终是不同的ReactElement，并导致重新渲染，即使您的组件扩展了PureComponent

请注意，Redux的

connect

过去是一个运行时包装器，但后来改为HOC，因为如果使用

pure

选项（默认情况下为true），它允许避免无用的重新渲染

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

---

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

shouldComponentUpdate

---

更多说明如下：

Facebook建议无状态组件使用 资料来源：

在理想情况下，大多数组件都是无状态的 功能，因为在未来，我们还可以提高性能 针对这些组件的优化，避免不必要的 检查和内存分配。这是推荐的模式，当 可能

功能标签（道具）{
返回{props.label}；
}
功能你好（道具）{
返回{props.label}{props.name}；
}
var hello=hello（{name:“Joe”，label:label（{label:“I am”}）}）；
render（你好，mountNode）；

constparentcomponent=（道具）=>{
返回(
{props.childComponent}
//…附加JSX。。。
)
}
//导入组件
从//…导入MyComponent（如果有）
//在var中放置
常量myComponent=
//道具

我更喜欢使用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
};

import React，{cloneElement，Component}来自“React”；
从“道具类型”导入道具类型；
导出类测试扩展组件{
render（）{
const{children，wrapper}=this.props；
返回(
cloneElement（包装器{
…包装器。道具，
儿童
})
);
}
}
Test.propTypes={
包装器：PropTypes.element，
//…其他道具
};
Test.defaultProps={
包装器：，
//…其他道具
};

然后，您可以使用所需的内容替换包装器div：

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

孩子1
孩子2

您可以将其作为普通道具传递：

foo={}

例如：

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

const ComponentOne=（）=>你好，世界！
常量组件二=（）=>(
你好！
)
常量组件三=（{foo}）=>{foo}

游戏进行得很晚，但这里有一个强大的HOC模式，可以通过提供组件作为道具来覆盖组件。它既简单又优雅

假设

MyComponent

呈现了一个虚构的

a

组件，但您希望允许对

a

进行自定义覆盖，在本例中

B

，它将

a

包装在

中……

并在文本属性中附加“！”：

从“虚构的工具提示”中导入；
常量MyComponent=props=>(
你好
);
MyComponent.defaultProps={A}；
常数B=props=>(
);
ReactDOM.render（）；

下面是一个父列表react组件的示例，whos道具包含react元素。在这种情况下，只传入一个链接react组件（如dom渲染中所示）

类链接扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.name}

);
}
}
类列表扩展了React.Component{
render（）{
返回(
{this.props.element}
{this.props.element}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

实际上，您的问题是如何编写高阶组件（HOC）。使用HOC的主要目的是防止复制粘贴。您可以将HOC编写为纯功能组件或类，例如：

    class Child extends Component {
    render() {
        return (
            <div>
                Child
            </div>
        );
    }
}

类子级扩展组件{
render（）{
返回(
小孩
);
}
}

如果要将父组件编写为基于类的组件，请执行以下操作：

    class Parent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}

类父级扩展组件{
render（）{
返回(
{this.props.children}
);
}
}

如果要将父级编写为功能组件：

    class Parent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}

const Parent=props=>{
返回(
{props.children}
)
}

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

    class Parent extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}

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

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

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

import CustomerFilters;

parent:

const handleFilterChange = (value) => {
 console.log(value)
}

<DataGrid
   contentName="customer"
   fetchFilterComponents = {<CustomerFilters onSelectFilter={handleFilterChange} />}
</DataGrid>


child:
CustomerFilters
return (

        <select className="filters-dropdown" onChange={onSelectFilter}>
          <option>Select Filter</option>
          {customerFilterOptions?.map((filter: any) => {
            return <option value={filter.value}>{filter.name}</option>;
          })}
        </select>
)