Question

首先观看此内容，以便您可以看到正在进行的行为。

Timing Issue（一个组件中的JS依赖于另一个组件首先存在）

在我在此组件的ComponentDidMount中应用此JS之前，我需要能够以某种方式检查另一个组件是否存在

const TableOfContents = Component({
    store: Store('/companies'),
    componentDidMount() {
        const el = ReactDOM.findDOMNode(this);
        console.log("table of contents mounted");
        if(document.getElementById('interview-heading') && el) {

            new Ink.UI.Sticky(el, {topElement: "#interview-heading", bottomElement: "#footer"});
        }
    },

它确实击中了我的if语句并且确实击中了Sticky（）函数，但我仍然认为当我刷新页面时遇到问题，而这个JS由于某种原因没有处理面试标题组件。

请注意下面的id="interview-heading"。

const InterviewContent = Component({
    componentDidMount() {
        console.log("InterviewContent mounted");
    },
    render(){
        var company = this.props.company;

        return (
            <div id="ft-interview-content">
                <p className="section-heading bold font-22" id="interview-heading">Interview</p>
                <InterviewContentMain company={company}/>
            </div>
        )
    }
})

const InterviewContentMain = Component({
    componentDidMount() {
        console.log("InterviewContentMain mounted");
    },
        render(){
            var company = this.props.company;

            return (
                <div id="interview-content" className="clear-both">
                    <div className="column-group">
                        <div className="all-20">
                            <TableOfContents company={company}/>
                        </div>
                        <div className="all-80">
                            <InterviewContainer company={company}/>
                        </div>
                    </div>
                </div>
            )
        }
    })



export default InterviewContent;

我意识到TableOfContents是在InterviewContent之前呈现的，因为它是TableOfContents的孩子，我相信React子项在父母之前呈现（从里到外）？

Answer 1

我认为您需要重新考虑您的组件结构。我不知道你的整个设置，但看起来你应该有一个共享的父组件将消息从var x = 1; (function(x, j) { j.fn.cool = function() {}; x = 2; })(x, jQuery); console.log(jQuery.fn.cool); // returns the newly added function传递给TableOfContents：

InterviewContent

然后让const InterviewContentMain = Component({ getInitialState() { return { inkEnabled: false } }, componentDidMount() { console.log("InterviewContentMain mounted"); }, enableInk() { this.setState({ inkEnabled: true }); } render(){ var company = this.props.company; return ( <div id="interview-content" className="clear-both"> <div className="column-group"> <div className="all-20"> <TableOfContents inkEnabled={this.state.inkEnabled} company={company}/> </div> <div className="all-80"> <InterviewContainer enableInk={this.enableInk} company={company}/> </div> </div> </div> ) } }) const TableOfContents = Component({ store: Store('/companies'), componentDidMount() { console.log("table of contents mounted"); this.props.enableInk(); }, ... const InterviewContent = Component({ enableInk() { new Ink.UI.Sticky(el, {topElement: "#interview-heading", bottomElement: "#footer"}); }, // willReceiveProps isn't called on first mount, inkEnabled could be true so componentDidMount() { if (this.props.inkEnabled) { this.enableInk(); } }, componentWillReceiveProps(nextProps) { if (this.props.inkEnabled === false && nextProps.inkEnabled === true) { this.enableInk(); } } render(){ var company = this.props.company; return ( <div id="ft-interview-content"> <p className="section-heading bold font-22" id="interview-heading">Interview</p> <InterviewContentMain company={company}/> </div> ) } })触发componentDidMount。

或者更好的是，为什么不将this.props.enableInk()电话放在Ink.UI.Sticky的{{1}}中？

在调用JS之前检查另一个组件是否已渲染

1 个答案: