GVKun编程网logo

如何将道具传递给{this.props.children}（道具导入）

8

在本文中，我们将详细介绍如何将道具传递给{this.props.children}的各个方面，并为您提供关于道具导入的相关解答，同时，我们也将为您带来关于#react#this.props.child

在本文中，我们将详细介绍如何将道具传递给{this.props.children}的各个方面，并为您提供关于道具导入的相关解答，同时，我们也将为您带来关于#react# this.props.children的处理、javascript – React：为什么`this.props.children`未定义？、javascript – React：使用this.props.children或将组件作为命名道具传递、JavaScript如何将道具传递给{this.props.children}的有用知识。

本文目录一览：

如何将道具传递给{this.props.children}（道具导入）

如何将道具传递给{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}定义包装器组件时，如何将某些属性传递给其所有子组件？

答案1

小编典典

用新道具克隆Children

您可以使用React.Children遍历子级，然后使用React.cloneElement使用新的道具（浅合并）克隆每个元素，例如：

import React, { Children, isValidElement, cloneElement } from ''react'';const Child = ({ doSomething, value }) => (  <div onClick={() => doSomething(value)}>Click Me</div>);function Parent({ children }) {  function doSomething(value) {    console.log(''doSomething called by child with value:'', value);  }  render() {    const childrenWithProps = Children.map(children, child => {      // Checking isValidElement is the safe way and avoids a TS error too.      if (isValidElement(child)) {        return cloneElement(child, { doSomething })      }      return child;    });    return <div>{childrenWithProps}</div>  }};ReactDOM.render(  <Parent>    <Child value="1" />    <Child value="2" />  </Parent>,  document.getElementById(''container''));

小提琴：https :
//jsfiddle.net/2q294y43/2/

称呼children为功能

您也可以将道具传递给带有渲染道具的children。在这种方法中，子代（可以是children或任何其他prop名称）是一个函数，可以接受您要传递的任何参数并返回子代：

const Child = ({ doSomething, value }) => (  <div onClick={() =>  doSomething(value)}>Click Me</div>);function Parent({ children }) {  function doSomething(value) {    console.log(''doSomething called by child with value:'', value);  }  render() {    // Note that children is called as a function and we can pass args to it    return <div>{children(doSomething)}</div>  }};ReactDOM.render(  <Parent>    {doSomething => (      <React.Fragment>        <Child doSomething={doSomething} value="1" />        <Child doSomething={doSomething} value="2" />      </React.Fragment>    )}  </Parent>,  document.getElementById(''container''));

如果您愿意，也可以代替<React.Fragment>或简单地<>返回一个数组。

小提琴：https :
//jsfiddle.net/ferahl/y5pcua68/7/

#react# this.props.children的处理

#react# this.props.children的处理

React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。
this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。
this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。
this.props.children的返回值情况如下：

<NotesList>
   <span>hello</span>
   <span>hello</span>
</NotesList>
//返回两个子节点


<NotesList></NotesList>
//返回undefined


<NotesList>null</NotesList>
//返回null

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

React.Children.map

object React.Children.map(object children, function fn [object context])

在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。

使用方法：
React.Children.map(this.props.children, function (child) {
    return <li>{child}</li>;
})

React.Children.forEach

React.Children.forEach(object children, function fn [object context])

类似于 React.Children.map()，但是不返回对象。

使用方法
this.props.children.forEach(function (child) {
    return <li>{child}</li>
})

类似于 React.Children.map()，但是不返回对象

React.Children.count

number React.Children.count(object children)

返回 children 当中的组件总数，和传递给 map 或者 forEach 的回调函数的调用次数一致。

<NotesList>
    <span>hello</span>
    <span>hello</span>
</NotesList>
console.log(React.Children.count(this.props.children)); //2

<NotesList></NotesList>
console.log(React.Children.count(this.props.children)); //0

<NotesList>null</NotesList>
console.log(React.Children.count(this.props.children)); //1

React.Children.only

object React.Children.only(object children)

返回 children 中 仅有的子级。否则抛出异常。
这里仅有的子级，only方法接受的参数只能是一个对象，不能是多个对象（数组）

console.log(React.Children.only(this.props.children[0])); 
//输出对象this.props.children[0]

函数调用

<input type="button" value=''登 录'' className=''login-button'' onClick={this.loginAjax.bind(this,''01'')}/>

function loginAjax(param, event){}

javascript – React：为什么`this.props.children`未定义？

javascript – React：为什么`this.props.children`未定义？

我正在用ReactJS构建一个电子电阻计算器.我有一个声明如此的组合组件： 
var ResistanceCalculator = React.createClass({
    getinitialState: function() {
        return {bands: [0,0]}
    },componentDidMount: function() {
        console.log(this.props.children); // => undefined
    },render: function() {
        return (
            <div>
                <OhmageIndicator bands={this.state.bands} />
                <SVGResistor bands={this.state.bands} />
                <BandSelector band={1} />
                <BandSelector band={2} />
                <BandSelector band={3} />
                <BandSelector band={4} />
                <BandSelector band={5} />
            </div>
         );
    }
});

BandSelector渲染< select>元素和当一个更改我想更新ResistanceCalculator的状态.所以我的想法是我需要将一个事件监听器绑定到ResistanceCalculator子节点.然而this.props.children似乎是空的.为什么是这样？

解决方法

经验法则是：this.props中的所有内容都从父级传递给您.
所以你以错误的方式使用this.props.children.如果我有这样的事情： 
<Todos><div /><div /></Todos>

那么,对于Todos组件,this.props.children将是div的数组.

你想要的是简单的回调(working example)：

/** @jsx React.DOM */
var ResistanceCalculator = React.createClass({
  getinitialState: function() {
      return {bands: [0,0]};
  },handleBandSelectionChange: function(bandindex,newValue) {
    // for the sake of immutability,clone the array here
    var bands = this.state.bands.slice(0);
    bands[bandindex] = newValue;
    console.log(bandindex,newValue); // yep,seems to work
    this.setState({bands: bands});
  },render: function() {
    return (
      <div>
        <OhmageIndicator bands={this.state.bands} />
        {
          this.state.bands.map(function(value,i) {
            return (
              <BandSelector band={i} onChange={this.handleBandSelectionChange}/>
            );
          },this)
        }
      </div>
    );
  }
});

var BandSelector = React.createClass({
  handleChange: function(e) {
    if (this.props.onChange)
      this.props.onChange(this.props.band,e.target.value);
  },render: function() {
    return (
      <select onChange={this.handleChange}>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    );
  }
});

我从select中听到常规的onChange事件,然后在处理程序中调用我父的处理程序(handleBandSelectionChange).请注意,对于父级(ResistanceCalculator),事件不必是onChange;它可以是任何名称,只要孩子称之为.将它命名为“更改”会更好.

作为旁注,this.props.children用于包装组件,这些组件希望在自己完成某些工作时透明地呈现其内容.

javascript – React：使用this.props.children或将组件作为命名道具传递

javascript – React：使用this.props.children或将组件作为命名道具传递

我正在构建一个需要渲染一些子组件的组件.更具体地说,我有一个Map组件,我想在其上显示一个Legend组件. 
const Map = props => (
  <div id="map">
    { this.props.children }
  </div> 
);

// Usage:
const MapWithLegend = () => (
  <div id="map-view">
    <Map><Legend /></Map>
  </div> 
);

// Usage:
const MapWithoutLegend = () => (
  <div id="map-view">
    <Map />
  </div> 
);

但是,这也可以使用命名道具表达：

const Map = ({ legend } => (
  <div id="map">{ legend }</div> 
);

// Usage:
const MapWithLegend = () => (
  <div id="map-view">
    <Map legend={Legend} />
  </div> 
);

// Usage:
const MapWithoutLegend = () => (
  <div id="map-view">
    <Map />
  </div> 
);

我不确定在缩放和可重用性方面哪种方式最好.最终,我们将不仅仅是传说来放置地图,例如：缩放,缩放/导航控件等……

为此使用React.Children是否有意义,还是应该使用命名道具？

我的直觉是使用this.props.children可以解释Map是否需要渲染一个图例或任何其他子控件,但它还会在Map组件中创建一个后门,即：将任意组件作为子元素传递Map组件.

这是一个问题吗？在渲染它们之前检查父组件中的this.props.children是否常见？如果是这样,怎么样？

那么,造型呢？通过命名道具,我可以定位/设计“儿童”,因为它们被命名,我知道它们是什么.使用React.Children,它是一个需要检查的组件数组,以便它们可以定位,在这种情况下,使用this.props.children可以获得什么？

我已经看到使用这两种范例的第三方组件,但我很好奇一个人选择一个而不是另一个的情景.

解决方法

我建议使用儿童：

>只需查看渲染函数,JSX语法就可以轻松地向您显示组件的功能.如果您将图例作为道具传递,则您不知道< Map />会做的.
>它使您能够从容器中传递道具到子容器,该容器呈现地图及其子项.这再次使得< Legend />所发生的事情变得更加明显.

检查孩子听起来像你将实现一个大的switch-case语句来处理所有边缘情况.使用儿童不会产生任何边缘情况.

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

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

如何解决JavaScript如何将道具传递给{this.props.children}？

您可以使用React.Children遍历子级，然后使用React.cloneElement使用新的道具（浅合并）克隆每个元素，例如：

const Child = ({ doSomething, value }) => (
  <div onClick={() => doSomething(value)}>Click Me</div>
);

class Parent extends React.PureComponent {
  doSomething = value => {
    console.log(''doSomething called by child with value:'', value);
  }

  render() {
    const childrenWithProps = React.Children.map(this.props.children, child =>
      React.cloneElement(child, { doSomething: this.doSomething })
    );

    return <div>{childrenWithProps}</div>
  }
};

ReactDOM.render(
  <Parent>
    <Child value="1" />
    <Child value="2" />
  </Parent>,
  document.getElementById(''container'')
);

您也可以将道具传递给带有渲染道具的孩子。在这种方法中，子代（可以是children或任何其他prop名称）是一个函数，可以接受您要传递的任何参数并返回子代：

const Child = ({ doSomething, value }) => (
  <div onClick={() =>  doSomething(value)}>Click Me</div>
);

class Parent extends React.PureComponent {
  doSomething = value => {
    console.log(''doSomething called by child with value:'', value);
  }

  render() {
    // Note that children is called as a function and we can pass args to it
    return <div>{this.props.children(this.doSomething)}</div>
  }
};

ReactDOM.render(
  <Parent>
    {doSomething => (
      <React.Fragment>
        <Child doSomething={doSomething} value="1" />
        <Child doSomething={doSomething} value="2" />
      </React.Fragment>
    )}
  </Parent>,
  document.getElementById(''container'')
);

如果您愿意，也可以代替<React.Fragment>或简单地<>返回一个数组。

解决方法

我正在尝试找到定义可以以一般方式使用的某些组件的正确方法：

<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}定义包装器组件时，如何将某些属性传递给其所有子组件？

我们今天的关于如何将道具传递给{this.props.children}和道具导入的分享就到这里，谢谢您的阅读，如果想了解更多关于#react# this.props.children的处理、javascript – React：为什么`this.props.children`未定义？、javascript – React：使用this.props.children或将组件作为命名道具传递、JavaScript如何将道具传递给{this.props.children}的相关信息，可以在本站进行搜索。

本文标签：

上一篇手动刷新或编写时，React-router网址不起作用（react主动刷新）

下一篇如何在React Router v4中推送到历史记录？（react router history）

相关文章