如何将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.cloneElement()给了我很多问题，我使用Typescript的函数组件，所以我用孩子(道具)作为一种方式来传递我的道具给我的孩子元素。同样，我的情况非常独特，我必须传递给父组件一个属性，然后基于该属性，它将某些道具传递给子组件。这可以在一个简单的CodeSandbox示例中看到

App.tsx

import "./styles.css";
import Parent from "./Parent";

export default function App() {
  return (
    <>
      <Parent title={"With div wrapper"}>
        {({ title }) => <h1>{title}</h1>}
      </Parent>

      <Parent>
        {({ title }) => <h1>{title === undefined && "this is undefined"}</h1>}
      </Parent>
    </>
  );
}

Parent.tsx

export interface ChildrenProps {
  title?: string;
}

interface ParentWrapperProps {
  children: (title: ChildrenProps) => JSX.Element;
  title?: string;
}

const ParentWrapper: React.FC<ParentWrapperProps> = ({ children, title }) => {
  return title ? (
    <div>{children({ title: title })}</div>
  ) : (
    <>{children({ title: undefined })}</>
  );
};

export default ParentWrapper;

2022-10-14 21:47:14

其他回答

你不再需要{this.props.children}。现在你可以在Route中使用render来包装你的子组件，并像往常一样传递你的道具:

<BrowserRouter>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/posts">Posts</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>

    <hr/>

    <Route path="/" exact component={Home} />
    <Route path="/posts" render={() => (
      <Posts
        value1={1}
        value2={2}
        data={this.state.data}
      />
    )} />
    <Route path="/about" component={About} />
  </div>
</BrowserRouter>

2016-11-02 11:59:38

这是你所要求的吗?

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

进一步@and_rest的答案，这是我如何克隆孩子和添加一个类。

<div className="parent">
    {React.Children.map(this.props.children, child => React.cloneElement(child, {className:'child'}))}
</div>

2017-02-02 11:18:58

渲染道具是解决这个问题最准确的方法。不要将子组件作为子道具传递给父组件，而是让父组件手动呈现子组件。渲染是react中的内置道具，它接受函数参数。在这个函数中，你可以让父组件用自定义参数呈现你想要的任何东西。基本上，它做的事情与子道具相同，但它更可定制。

class Child extends React.Component {
  render() {
    return <div className="Child">
      Child
      <p onClick={this.props.doSomething}>Click me</p>
           {this.props.a}
    </div>;
  }
}

class Parent extends React.Component {
  doSomething(){
   alert("Parent talks"); 
  }

  render() {
    return <div className="Parent">
      Parent
      {this.props.render({
        anythingToPassChildren:1, 
        doSomething: this.doSomething})}
    </div>;
  }
}

class Application extends React.Component {
  render() {
    return <div>
      <Parent render={
          props => <Child {...props} />
        }/>
    </div>;
  }
}

在codepen的例子

2019-02-20 00:47:55

用新道具克隆孩子

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

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

将子函数作为函数调用

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

2015-09-03 09:17:38

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

推荐文章

最新文章

标签