如何将props传递给{this.props.children}

我试图找到正确的方法来定义一些组件，这些组件可以以通用的方式使用:

<Parent>
  <Child value="1">
  <Child value="2">
</Parent>

当然，在父组件和子组件之间呈现有一个逻辑，您可以想象<select>和<option>是这个逻辑的一个例子。

这是为了解决这个问题的一个虚拟实现:

var Parent = React.createClass({
  doSomething: function(value) {
  },
  render: function() {
    return (<div>{this.props.children}</div>);
  }
});

var Child = React.createClass({
  onClick: function() {
    this.props.doSomething(this.props.value); // doSomething is undefined
  },
  render: function() {
    return (<div onClick={this.onClick}></div>);
  }
});

问题是无论何时使用{this.props。Children}定义一个包装器组件，如何将某些属性传递给它的所有子组件?

当前回答

我在研究类似的需求时写了这篇文章，但我觉得克隆解决方案太受欢迎了，太原始了，把我的注意力从功能上转移开了。

我在react文档《高阶组件》中找到了一篇文章

以下是我的例子:

import React from 'react';

const withForm = (ViewComponent) => {
    return (props) => {

        const myParam = "Custom param";

        return (
            <>
                <div style={{border:"2px solid black", margin:"10px"}}>
                    <div>this is poc form</div>
                    <div>
                        <ViewComponent myParam={myParam} {...props}></ViewComponent>
                    </div>
                </div>
            </>
        )
    }
}

export default withForm;


const pocQuickView = (props) => {
    return (
        <div style={{border:"1px solid grey"}}>
            <div>this is poc quick view and it is meant to show when mouse hovers over a link</div>
        </div>
    )
}

export default withForm(pocQuickView);

对我来说，我在实现高阶组件的模式中找到了一个灵活的解决方案。

当然，这取决于功能，但如果其他人正在寻找类似的需求，这是很好的，这比依赖于原始级别的反应代码，如克隆要好得多。

我经常使用的另一种模式是容器模式。一定要读一读，那里有很多文章。

2020-08-13 07:44:54

其他回答

我确实努力让列出的答案工作，但失败了。最终，我发现问题在于正确地建立亲子关系。仅仅在其他组件中嵌套组件并不意味着存在父子关系。

例1。亲子关系;

function Wrapper() {
  return (
    <div>
      <OuterComponent>
        <InnerComponent />
      </OuterComponent>
    </div>
  );
}
function OuterComponent(props) {
  return props.children;
}
function InnerComponent() {
  return <div>Hi! I'm in inner component!</div>;
}
export default Wrapper;

例2。嵌套的组件:

function Wrapper() {
  return (
    <div>
      <OuterComponent />
    </div>
  );
}
function OuterComponent(props) {
  return <InnerComponent />
}
function InnerComponent() {
  return <div>Hi! I'm in inner component!</div>;
}
export default Wrapper;

如上所述，道具传递在例1中有效。

下面的文章对此进行了解释https://medium.com/@justynazet/passing-props-to-props-children-using-react-cloneelement- andrend-props -pattern-896da70b24f6

2021-11-13 04:18:56

根据cloneElement()的文档

React.cloneElement(
  element,
  [props],
  [...children]
)

克隆并返回一个新的React元素，使用element作为起始元素点。生成的元素将具有原始元素的道具新道具浅浅地融合在一起。新的孩子将取代现有的儿童。原元素的Key和ref将为保存了下来。 React.cloneElement()几乎等同于: <元素。{…元素类型。道具道具}{…}>{孩子}< / element.type > 然而，它也保留了裁判。这意味着如果你有了孩子有裁判在上面，你就不会不小心从你的祖先那里偷了它。你会得到相同的引用附加到你的新元素。

因此，您将使用cloneElement为儿童提供自定义道具。然而，组件中可能有多个子组件，您需要循环遍历它。其他答案建议你使用react。children。map来映射它们。然而React. children .map不同于React。cloneElement更改Element附加项和额外的。$作为前缀的键值。查看这个问题了解更多细节:React。React.Children.map中的cloneElement会导致元素键的改变

如果您希望避免它，您应该改用forEach函数，如

render() {
    const newElements = [];
    React.Children.forEach(this.props.children, 
              child => newElements.push(
                 React.cloneElement(
                   child, 
                   {...this.props, ...customProps}
                )
              )
    )
    return (
        <div>{newElements}</div>
    )

}

2018-01-11 05:57:17

对于任何只有一个子元素的人来说，这样做都可以。

{React.isValidElement(this.props.children)
                  ? React.cloneElement(this.props.children, {
                      ...prop_you_want_to_pass
                    })
                  : null}

2019-01-08 13:01:47

这是你所要求的吗?

var Parent = React.createClass({
  doSomething: function(value) {
  }
  render: function() {
    return  <div>
              <Child doSome={this.doSomething} />
            </div>
  }
})

var Child = React.createClass({
  onClick:function() {
    this.props.doSome(value); // doSomething is undefined
  },  
  render: function() {
    return  <div onClick={this.onClick}></div>
  }
})

2015-09-03 09:02:02

用新道具克隆孩子

你可以使用React。子元素遍历子元素，然后使用React.cloneElement用新道具(浅合并)克隆每个元素。

请参阅代码注释，为什么我不推荐这种方法。

将子函数作为函数调用

或者，你可以通过渲染道具将道具传递给孩子们。在这种方法中，children(可以是children或任何其他道具名)是一个函数，它可以接受你想传递的任何参数，并返回实际的子函数:

2015-09-03 09:17:38

如何将props传递给{this.props.children}

推荐文章

最新文章

标签