代码之家  ›  专栏  ›  技术社区  ›  Piotr Å»ak

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

  •  0
  • Piotr Å»ak  · 技术社区  · 7 年前

    我有5代组件结构:

    首先,我创建一个上下文:

    const ThemeContext = React.createContext();
    

    在提供程序中创建

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

    {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的输出是“[对象,对象]”

    1 回复  |  直到 7 年前
        1
  •  2
  •   Estus Flask    7 年前

    弦状物 "[Object, object]" 表示对象值是在需要字符串的位置提供的。

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

    className 接受字符串,但是 class 如果值为false,则不会添加属性。

    如中所述 this answer ,它是一个层次结构 Provider Consumer <ThemeContext.Consumer> 应该有 <ThemeContext.Provider> 作为父母。

    如果有适当的层次结构但没有上下文 value 是falsy,意思是 this.props.name 作为提供者传递时是falsy 价值 道具:

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