在上下文中传递道具[React]

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接受字符串，但如果值为falsy，则不会添加class属性。

正如在this answer中所解释的那样，它是Provider和Consumer组件的层次结构，允许传递上下文，因此<ThemeContext.Consumer>应该将<ThemeContext.Provider>作为父级。

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

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