在React

Question

在尝试显示或隐藏反应中的div时遇到一点麻烦。

我有三个班级：

1. RunningOrder Section
2. RunningOrder
3. Story

运行顺序部分是主要部分，它呈现正在运行的顺序类，并且运行顺序呈现Story类。

我在运行顺序部分有一个切换开关，它按运行顺序切换'displayStory'状态，并且运行顺序将'displayStory'bool状态作为故事的道具传递。

在RunningOrder部分中切换：

_triggerChildDisplay: function () {
  this.refs.child.displayStory();
},

<Toggle
  tooltip = {'Auto Sequence'}
  onToggle = {this._triggerChildDisplay}
/>

for (let storyId in ro.stories) {
        allStories.push(<Story key={storyId} story={ro.stories[storyId]} displayStory={this.state.displayStory}/>)
    };

运行顺序中的状态和道具：

displayStory: function() {
   this.setState({
      displayStory: !this.state.displayStory
   });
},

for (let storyId in ro.stories) {
   allStories.push(<Story key={storyId} story={ro.stories[storyId]} displayStory={this.state.displayStory}/>)
};

渲染故事方法

   if(allItems.length > 0) {
            return (
                <div className="story-container"> 
                    <div className="story-label-container">
                        <div className="story-slug">

                            <span className="story-title">
                                {story.slug}
                            </span>

                            {/*<span className="storyItemLength">
                                {allItems.length}
                            </span>*/}

                            <span className="story-sequence-control">
                                <OverlayTrigger placement="top" overlay={autoSequenceTooltip}>
                                    <Toggle
                                        label = {<SequenceIcon />}
                                        disabled = {allItems.length > 0? false : true}
                                        tooltip = {'Auto Sequence'}
                                        onToggle = {this.toggled}
                                    />
                                </OverlayTrigger>

                            </span>

                        </div>

                    </div>

                    {itemList}

                </div>
            );
        } else {
            return (
                <div className={this.props.displayStory ? "story-container" : "hidden story-container"}>                
                    <div className="story-label-container">
                        <div className="story-slug">

                            <span className="story-title">
                                {story.slug}
                            </span>

                            {/*<span className="storyItemLength">
                                {allItems.length}
                            </span>*/}

                            <span className="story-sequence-control">
                                <OverlayTrigger placement="top" overlay={autoSequenceTooltip}>
                                    <Toggle
                                        label = {<SequenceIcon />}
                                        disabled = {allItems.length > 0? false : true}
                                        tooltip = {'Auto Sequence'}
                                        onToggle = {this.toggled}
                                    />
                                </OverlayTrigger>

                            </span>

                        </div>

                    </div>
                    {itemList}
                </div>
            );
        }

    }

如果allItems数组的长度大于0，我只希望能够在故事中切换元素的显示，因此返回两个。

运行顺序循环并从服务器中提取数据，正在运行的订单类返回3个项目，每个项目都有多个项目，我需要切换显示的故事。

现在我的代码正在运行，但出于某种原因，我只能在运行顺序返回的最后一个元素中切换显示（隐藏的css类）。所以如果退回运行订单：

<div 1>
   <items />
</div>
<div 2>
   <items />
</div>
<div 3>
   <items />
</div>

显示切换仅影响div 3中的项目。

*******更新：**而不是针对运行顺序呈现的所有元素的单个切换我已经将切换开关置于运行顺序并且它工作正常，所以这里调用reffs： this.refs.child.displayStory();