Question

我正在把markdown预览器作为freecodecamp中的一个项目，我想使用react来做。我制作了6个组件-应用程序，工具栏，编辑器窗口，编辑器，预览窗口，预览。

app是父组件，分为2个部分-编辑器窗口和预览窗口。
编辑器窗口进一步分为2-工具栏和编辑器。
预览窗口-工具栏和预览。

因此，为了不重复代码，我想对两个窗口使用相同的工具栏组件。工具栏组件包含一个最大化按钮，单击该按钮可使窗口全屏显示。我的问题是，当我单击按钮之一时，两个窗口都将全屏显示。我想知道是否有可能做出反应以区分编辑器工具栏和预览工具栏？还是我必须为两个工具栏制作2个单独的组件。如果是这样，有没有一种方法可以使我不必重复两次代码。

class Toolbar extends React.Component{
  constructor(props){
    super(props);
  }
  componentDidMount(){
    $('.full-screen-btn').click(this.maximise);
  }
  render(){
    return(
      <div className='toolbar'>
        <div>
        {this.props.window} window
        </div>
        <i className='fas fa-arrows-alt full-screen-btn'></i>
       </div>
    );
  }
}

class EditorWindow extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div id='editor-window'>
        <ToolbarEditor window='editor'/>
        <Editor handleChange={this.props.handleChange} input={this.props.input}/>
      </div>
    )
  }
}

我是新来的反应者，因此，如果您认为我可以做得更好，请发表评论。

Answer 1

您可以删除不需要的jquery，您应该依靠React来处理DOM操作。您可以在onClick元素上使用i处理程序，并将窗口道具作为arg传递。

<i className='fas fa-arrows-alt full-screen-btn' onClick={() => this.maximize(this.props.window)}></i>

再次使用组件进行反应

1 个答案: