Question

让我们说我正在建立一个反应应用程序，通过这种方式单击按钮来更改框内的内容（单击相同的按钮）：

Click 1: Component 1
Click 2: Component 2
Click 3: Component 3
Click 4: Component 1
Click 5: Component 2
Click 6: Component 3

因此，显而易见的方法是通过状态，并在render方法中根据状态呈现所需的组件。但我不想重新报复每一个组成部分。也就是说，在按钮单击时，我只想让前一个组件变为不可见，并显示新元素。

在简单的普通HTML / CSS / JS中很容易做到：

display:none;

但是人们如何做出反应，为什么它会比正常做得更好/更有效？

不一定要寻找完整的代码，更多的是要了解该怎么做。

提前致谢！

Answer 1

将计数器维护为状态并在每次点击时增加它，根据该值可以有条件地将样式添加到组件中，例如

 onClick={() => {
     this.setState((prevState) => (
            {counter: (prevState.counter + 1)%3)}
             )
    )}
 }

然后在组件样式中，您需要在组件最外层div上内部应用

<Component1 style={(this.state.counter == 0)? {display: 'block'}: {display: 'none'}}/>

在Component1中

render() {
    return <div style={this.props.style}>{/* Content Here */}</div>
}

此外，由于React维护虚拟DOM以进行更新，因此渲染内容更加有效且速度更快

Answer 2

希望这会有所帮助。如果您需要任何解释，请告诉我......

＆＃13;

class Container extends React.Component {
  constructor(props) {
    super(props);
  }
  
  getContainer() {
    switch (this.props.id) {
      case 1:
        return (<div>First Container</div>);
      case 2:
        return (<div>Second Container</div>);
      case 3:
        return (<div>Third Container</div>);
      case 4:
        return (<div>4th Container</div>);
      case 5:
        return (<div>5th Container</div>);
      case 6:
        return (<div>6th Container</div>);
      case 7:
        return (<div>7th Container</div>);
      case 8:
        return (<div>8th Container</div>);
      default:
        return (<div>don't have a Container</div>);
    }
  }
  
  render() {
    return (
      <div>
        {this.getContainer()}
      </div>
      );
  }
};

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    };
    this.test = this.test.bind(this);
  }
  
  test() {
    this.setState(prevState => ({
      count: this.state.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        <button onClick={this.test}> click me {this.state.count}</button>
        <Container id={this.state.count}/>
      </div>
    );
  }
}

ReactDOM.render( <
  Test / > ,
  document.getElementById('main')
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="main"></div>

＆＃13;

Answer 3

使用状态并在1到6之间循环计数器并使用您想象的计数器。渲染函数中的简单逻辑或后续子组件可以映射到要显示的6个显示组件。

由于react会对其影子DOM进行差异化，以最大限度地减少重新渲染的变化，因此与更改HTML标记显示或类相比，通常可以节省大量的渲染开销，同时创建更具表现力的代码。

从更大的角度来看，我说使用您在文档中看到的设计模式将它放在React中并且不用担心进一步优化，除非/直到遇到问题。通常你的渲染瓶颈是一个写得不好的重复函数，而不是React重新渲染组件。

编辑：

我想补充说，通过将onClick属性添加到调用React类中定义的函数的React渲染元素，您仍然可以通过可用的HTML / CSS / JS属性来定位HTML元素。通过这种方式，您仍然可以更改显示或类属性，同时保留React库和常规设计模式的其他优点。我过去曾使用它来启动组件或其他功能的自动对焦。在渲染组件的情况下，我仍然建议您信任React的优化，除非/直到给你一个理由不这样做。

Answer 4

如果没有管理状态和重新渲染，你将无法在React中完成此任务。如果你想用display: none渲染除了一个幻灯片之外的所有幻灯片，你必须在某个地方管理状态，并在它改变时用新样式重新渲染组件。

React范式的核心部分是其声明式方法。这意味着具有相同属性和状态的组件将始终呈现相同的视图。你要求的是

1）将为相同的道具/州提供不同视图的组件

OR

2）从React组件内部访问DOM并更改元素的样式

这两种方法在React和设计方面都不可行。

至于在React中构建是否有意义，对此没有直接的答案。如果你只想要一个静态轮播和一些其他静态内容，那么可能是vanilla JS或jQuery是有效的选项。如果您想要构建一个动态轮播，调用服务器端API来填充CMS中的内容，或者尝试构建可以集成到应用程序各个部分的可重用组件，那么React可能就是这样。

反应渲染不同的组件

4 个答案: