Question

我有5个组件的生成结构： A-B-C-D-E

最后我创建一个上下文：

const ThemeContext = React.createContext();

在A中创建了提供程序

     <ThemeContext.Provider value={this.props.name} >
                    <Col><Menu navbarState={this.state.name} /></Col>
    </ThemeContext.Provider>

在E中，我需要使用{this.props.name}

创建上下文

export class Panel extends RoleAwareComponentUser{

    constructor(props) {
        super(props);
        // component will be visible for the roles below:
        this.authorize = ['user'];  
      }

    render(){
    const jsx =(
    <div>
        <ThemeContext.Consumer>
            {value => <Col><Link className={{value: value}} to= "/HomePage">Panel</Link></Col>}
        </ThemeContext.Consumer>
    </div>
      );

      return this.shouldBeVisible() ? jsx : null;

    }
}

Link className的输出为“ [Object，object]”

我如何正确传递道具？

Answer 1

像"[Object, object]"这样的字符串化对象意味着在需要字符串的地方提供了对象值。

应该是：

<ThemeContext.Consumer>
    {value => <Col><Link className={value} to= "/HomePage">Panel</Link></Col>}
</ThemeContext.Consumer>

className接受字符串，但是如果值是伪造的，则不会添加class属性。

如this answer中所述，它是允许传递上下文的Provider和Consumer组件的层次结构，因此<ThemeContext.Consumer>应该具有<ThemeContext.Provider>作为父母。

如果存在适当的层次结构，但上下文value是虚假的，这意味着this.props.name在作为提供者value prop传递时是虚假的：

<ThemeContext.Provider value={this.props.name}>...

在上下文中传递道具[反应]

1 个答案: