Question

实施以下设计的正确方法是什么？

<Parent with state>
   <connected element with Store configuration dependant on parent>
      <child of both, dependant on store/connected element>
   </connected element>
 </parent>

我不确定要包含多少代码，而且几乎肯定会超出我的需要，所以这里有一个片段，我想解释了我想要完成的事情。

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

    this.state = {
      opacity: 0,
      script: sceneOneScript
    };
  }

  render () {   
    return (
      <ScriptReader script = {this.state.script}> //This is connected and creates a store from the script passed via state.
        <Screen data-image="caves.png" data-opacity={this.state.opacity} >//This uses actual SceneOne.state.opacity which is updated to 1 after a delay in ComponentDidMount

          <ConditionalTitle  props = {this.props}/> //This needs the store.
         </Screen>
      </ScriptReader>
    );
  }
}

我真的希望我不需要连接<ConditionalTitle>，因为这感觉它打破了不可知的组件原则。我也希望我不需要在<ConditionalTitle>的定义中安装<ScriptReader>，因为我打算重用它并传递不同的子/脚本等。

即。会有一个有<ScreenReader>孩子且可能没有标题，或者可能包含<SceneOne>中不需要的元素。

Answer 1

在构成所有选项

的ScriptReader定义中使用HOC

在React-Redux

1 个答案: