schovi / react-iscroll

React component for wrapping iScroll http://iscrolljs.com/
MIT License
236 stars 60 forks source link

update children context #48

Closed viper1104 closed 7 years ago

schovi commented 7 years ago

@viper1104 Hi, thanks for contributing. First: can you write some description for this? Second: You dont need to push change of package.json and version update.

viper1104 commented 7 years ago

ReactIScroll does not rerender children if the context was changed.

Example:

class ChildComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                {getText("text-key", this.context.locale)}
            </div>
        );
    }
}

ChildComponent.contextTypes = {
    locale: PropTypes.string
}

class MainComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {locale: "en"};
        this.onChangeLocale = this.onChangeLocale.bind(this);
    }

    getChildContext() {
        return {locale: this.state.locale};
    }

    componentDidMount() {
        Localization.bind('change-locale', this.onChangeLocale);
    }

    onChangeLocale(locale) {
        this.setState({locale});
    }

    render() {
        return (
            <ReactIScroll>
                <ChildComponent />
            </ReactIScroll>
        );
    }
}

MainComponent.childContextTypes = {
    locale: PropTypes.string
}

If localization is updated, ChildComponent does not know about the changes and does not rerender, because ReactIScroll does not respond to context changes. Need add check context to shouldComponentUpdate.

schovi commented 7 years ago

Released with 1.1.3