React获取父组件或子组件属性

React干货 admin 暂无评论

获取子组件的方法

可以通过递归this.props.children中得到

获取父组件的方法

方法一:可以通过react内部私有函数this.reactInternalInstance.currentElement.owner.instance获取

1.var Parent = React.createClass({
2.  render() {
3.      return <Child v="test" />;
4.  },
5.  doAThing() {
6.    console.log("I'm the parent, doing a thing.", this.props.testing);
7.  }
8.});
9.var Child = React.createClass({
10.  render() {
11.    return <button onClick={this.onClick}>{this.props.v}</button>
12.  },
13.  onClick() {
14.    var parent = this._reactInternalInstance._currentElement._owner._instance;
15.    console.log("parent:", parent);
16.    parent.doAThing();
17.  }
18.});
19.ReactDOM.render(<Parent testing={true} />, container);

但是这种方法是不推荐的。

方法二:通过属性传递给子组件

1.class Parent extends React.Component {
2.    constructor(props) {
3.        super(props)
4.        this.fn = this.fn.bind(this)
5.    }
6.    fn() {
7.        console.log('parent')
8.    }
9.    render() {
10.        return <Child fn={this.fn} />
11.    }
12.}
13.const Child = ({ fn }) => <button onClick={fn}>Click me!</button>

但是这种只在Child组件在Parent组件中时才可以用。

方法三:使用上下文(没有直接的父/子关系)

1.class Parent extends React.Component {
2.    constructor(props) {
3.        super(props)
4.        this.fn = this.fn.bind(this)
5.    }
6.    getChildContext() {
7.        return {
8.            fn: this.fn,
9.        }
10.    }
11.    fn() {
12.        console.log('parent')
13.    }
14.    render() {
15.        return <Child fn={this.fn} />
16.    }
17.}
18.Parent.childContextTypes = {
19.    fn: React.PropTypes.func,
20.}
21.const Child = (props, { fn }) => <button onClick={fn}>Click me!</button>
22.Child.contextTypes = {
23.    fn: React.PropTypes.func,
24.}

给子组件(没有直接父/子关系)添加属性

1.return React.cloneElement(this.props.children, {/*要添加的属性*/})

React关于子组件的API

React.chlidren.map
1.React.Children.map(children, function[(thisArg)])

对包含在 children 中的每个直接子元素调用一个函数,使用 this 设置 thisArg 。 如果 children 是一个键片段(keyed fragment)或数组,它将被遍历:该函数永远不会传递容器对象(container objects)。 如果 children 为 null 或 undefined ,返回 null 或 undefined,而不是一个数组。

1.import React from 'react';
2.const Salmonize = (
{ children }) => (
3.  <div>
4.    
{React.Children.map(children, child => (
5.      React.cloneElement(child, {
6.        style: {
7.          backgroundColor: 'salmon',
8.          color: 'seagreen',
9.        }

10.      })
11.    ))}
12.  </div>
13.);
14.const SalmonBlog = (
{ title, posts }) => (
15.  <div>
16.    <Salmonize>
17.      <NavBar title=
{title} />
18.    </Salmonize>
19.    
{posts.map(post => (
20.      <Post key={post.id}
>
21.        <Salmonize>
22.          <PostHeader title=
{post.title} />
23.        </Salmonize>
24.        <PostBody text=
{post.text} />
25.      </Post>
26.    ))}
27.  </div>
28.);

在上面这个例子中,Salmonize组件并不需要在乎谁是它的子组件,它通过遍历克隆每个子组件,通过React.cloneElement给子组件增加属性。

在React中编写真正可重复使用的组件肯定有点棘手,如果你遇到这样的麻烦,那么这种map和clone方法可以帮助到你。

React.children.forEach
1.React.Children.forEach(children, function[(thisArg)])

类似React.children.map,但是没有返回值。

React.Children.count
1.React.Children.count(children)

返回 children 中的组件总数,等于传递给 map 或 forEach 的回调将被调用的次数。

React.Children.only
1.React.Children.only(children)

返回 children 中的唯一子集。否则抛出异常。当您想要确保组件只有一个子级时,这可能会派上用场,如果不满足此条件,则会抛出错误。

1.export default React.createClass({
2.  // ...
3.  render: function() {
4.    const {name, selectedValue, onChange, children} = this.props;
5.    const renderedChildren = children(radio(name, selectedValue, onChange));
6.    return renderedChildren && React.Children.only(renderedChildren);
7.  }
8.});
React.Children.toArray
1.React.Children.toArray(children)

将 children 不透明数据结构作为一个平面数组返回,并且 key 分配给每个子集。 如果你想在渲染方法中操作children集合,特别是如果你想在传递它之前重新排序或切割 this.props.children ,这将非常有用。

该方法将children组件的支持转换为纯JavaScript数组,这可以使您比React.Children.map提供更多的灵活性。React.Children.toArray最近在我想要渲染一个分隔符的列表中时,它们之间散布着很方便。这导致我创建一个完成这个的组件。

1.import React from 'react';
2.const IntersperseDividers = ({ children }) => (
3.  <div>
4.    {React.Children.toArray(children).reduce((elements, child, i, array) => {
5.      elements.push(child);
6.      if (i < array.length - 1) {
7.        elements.push(<hr key={`${i}--divider`} />);
8.      }
9.      return elements;
10.    }, [])}
11.  </div>
12.);
13.const List = ({ data }) => (
14.  <IntersperseDividers>
15.    {data.map((item, i) => (
16.      <div key={i}>
17.        {item.value}
18.      </div>
19.    ))}
20.  </IntersperseDividers>
21.);


转载请注明:React教程中文网 - 打造国内领先的react学习网站-react教程,react学习,react培训,react开 » React获取父组件或子组件属性

喜欢 ()or分享