javascript - How to change parent-component style element according to its child-component state? - Stack Overflow

admin管理员组

文章数量:1403468

I'm trying to figure out how to set style to parent ponent while child ponent state change
consider a scenario in which we have a container ponent containing menu and side bar as its static elements plus child-ponent. while clicking the menu, it's corresponding ponent will render as child-ponent.

I'm using nested absolute route with react-router as follow

    <Route ponent={ home } >
       <Route path="menu-1" ponent={ menu-1 } />
       <Route path="menu-2" ponent={ menu-2 } />
       <Route path="menu-3" ponent={ menu-3 } />

inside home ponent i have something as follow:

    <div className='root'>
        <menuComponent />
        <sideBarComponnent />
        {this.props.children}

    </div>

as you can see i can't pass callback function to child-ponent for menu-1 , menu-2 i have no problem, but while clicking menu-3 and rendering it's ponent in the content tag,
i need to give it full width and set side bar display to none while the side bar has rendered in the container ponent i can't control it inside the child-one in a regular way

Im looking for a way which can be able to handle it inside home ponent

I'm trying to figure out how to set style to parent ponent while child ponent state change
consider a scenario in which we have a container ponent containing menu and side bar as its static elements plus child-ponent. while clicking the menu, it's corresponding ponent will render as child-ponent.

I'm using nested absolute route with react-router as follow

    <Route ponent={ home } >
       <Route path="menu-1" ponent={ menu-1 } />
       <Route path="menu-2" ponent={ menu-2 } />
       <Route path="menu-3" ponent={ menu-3 } />

inside home ponent i have something as follow:

    <div className='root'>
        <menuComponent />
        <sideBarComponnent />
        {this.props.children}

    </div>

as you can see i can't pass callback function to child-ponent for menu-1 , menu-2 i have no problem, but while clicking menu-3 and rendering it's ponent in the content tag,
i need to give it full width and set side bar display to none while the side bar has rendered in the container ponent i can't control it inside the child-one in a regular way

Im looking for a way which can be able to handle it inside home ponent

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Mar 31, 2016 at 11:12 Fakhruddin Abdi asked Mar 30, 2016 at 20:03 Fakhruddin AbdiFakhruddin Abdi 90633 gold badges1111 silver badges2525 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You can add function in props of child ponent. And when you need to change parent styles you call this function in child ponent. This function will change state of parent ponent and change it's styles.

Example:

class Parent extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            backgroundColor: 'yellow'
        }
    }

    onChangeStyle(backgroundColor) {
        this.setState({
            backgroundColor: backgroundColor
        })
    }

    render() {
        return <div style={{backgroundColor: this.state.backgroundColor, padding: 10}}>
            <Child onChangeParentStyle={this.onChangeStyle.bind(this)}/>
        </div>
    }
}

class Child extends React.Component {
    onClick() {
        this.props.onChangeParentStyle('red');
    }
    render() {
        return <span onClick={this.onClick.bind(this)} style={{background: 'white', cursor: 'pointer'}}>
            Change parent style
        </span>
    }
}

React.render(<Parent />, document.getElementById('container'));

Example on JSFiddle

You can use this.props.location.pathname inside ponentWillMount as follow:

ponentWillMount(){
 let propPlainUrl = /[a-zA-Z]+/g.exec(this.props.location.pathname);
               this.setState({
                  activeMenu: menuItems.indexOf(propPlainUrl[0]) + 1
            });

You can use ponentWillMount to set initial value for active key according to the selected route-menus

the above code just solve the problem once at the intial rendering for home ponent But what if you want to keep your procedure updated while ponent get updated on click menu event?

You can use same code with slight change as follow :

ponentWillReceiveProps(nextProps){
     let propPlainUrl = /[a-zA-Z]+/g.exec(nextProps.location.pathname);
     this.setState({
       activeMenu: menuItems.indexOf(propPlainUrl[0]) + 1
     });
   }

```

ponentWillReceiveProps will let you update the state on ponent update

本文标签： javascriptHow to change parentcomponent style element according to its childcomponent stateStack Overflow