Question

如何在React JSX中将父自定义的React组件状态属性值传递给子客户组件？

假定MyCustomRectComponentA组件的状态变量为“ offset”。然后如何获得对此的访问权作为道具传递给AnotherCustomComponentB？

  public render() {
    return (
      <MyCustomRectComponentA>
        <AnotherCustomComponentB offsetValue={parent.state.offset} />
      </MyCustomRectComponentA>
    );

  }

Answer 1

您可以在React.Children组件中使用React.cloneElement和MyCustomRectComponentA api。

例如：

import React, { Component, Children , cloneElement } from 'react'

class MyCustomRectComponentA extends Component {
    state = {
        offset: '50px'
    }
    render() {
        return (
            <div>              
                // mapping through every children elements
                // passed to "MyCustomRectComponentA" component
                {Children.map(this.props.children, child => { 
                    // you have to clone the child element
                    // because they are read-only 
                    // and pass the "state" as props
                    return cloneElement(child, {
                     offsetValue: this.state.offset 
                    })
                })}
            </div>
        )
    }   
}

export default MyCustomRectComponentA

此后，您可以将包含MyCustomRectComponentA和AnotherCustomComponentB的父组件更新为

 public render() {
    return (
      <MyCustomRectComponentA>
        <AnotherCustomComponentB />
      </MyCustomRectComponentA>
    );

  }

我们所做的是将<AnotherCustomComponentB />组件作为子级传递给</MyCustomRectComponentA>组件。

在</MyCustomRectComponentA>组件中

1）我们通过传递给它的子组件进行映射

2）克隆了子组件

3）将状态“偏移”作为道具传递给子组件

有关React.Children的更多信息，您可以转到此source

如何在React JSX中将父自定义的React组件状态属性值传递给子客户组件？

1 个答案: