Question

我正在尝试通过单击将组件添加到数组中，从而将组件添加到DOM。
区分要添加到数组以进行渲染的组件；我正在使用if语句来匹配状态，但是我不能在这里使用return，因为它不会返回任何内容。

谁能帮助我提供一个解决方案，要么从if语句匹配后返回，要么将现有的返回值合并到if语句中。

下面是我的应用程序，其中包含if语句

import React from 'react';
import ModuleOne from './moduleOne';
import ModuleTwo from './moduleTwo';
import ParentComponent from './parentComponent';
const Module1 = props => <ModuleOne />;
const Module2 = props => <ModuleTwo />;
class App extends React.Component {
  state = {
    numChildren: 0,
    doubleContent: false
    //tripleContent: false
  }
  isSingleContent = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    });
  }
  isDoubleContent = () => {
    this.setState({
      doubleContent: true,
      numChildren: this.state.numChildren + 1
    });
  }
  componentDidUpdate() {
    if (this.state.doubleContent == true) {
      this.setState(
        { doubleContent: false }
      );
    }
  }
  render() {
    const mods = [];
    for (var i = 0; i < this.state.numChildren; i += 1) {
      if (this.state.doubleContent) {
        mods.push(<Module2 key={i} number={i} />);
      }
      else {
        mods.push(<Module1 key={i} number={i} />);
      }
    };
    return (
      <ParentComponent singleContent={this.isSingleContent} doubleContent={this.isDoubleContent}>
        {mods}
      </ParentComponent>
    );
  }
}
export default App;

和父组件

包含按钮和嵌入阵列的视口。

import React from 'react';
const ParentComponent = props => (
    <div id="app">
        <a href="#" onClick={props.singleContent}>Add single</a><br/>
        <a href="#" onClick={props.doubleContent}>Add double</a>
        <div id="viewport">
            {props.children}
        </div>
    </div>
);
export default ParentComponent;

Answer 1

除非您计划将此代码移至方法上，否则我看不到返回的特殊原因。即使那样，您也不想返回，因为您想继续浏览整个列表。关于您为什么要退出的原因，我有些困惑。

我看到的一部分问题是，无论加倍还是不加倍，您都在加倍。对于您的代码来说，这并不是一个个案，因此在循环中使用if语句没有多大意义。我还使用了es6 map来减少代码。

let mods = [];
if(this.state.doubleNum){
    mods = this.state.numChildren.map( (num, index)=> <Module2 key={index} number={i} />
} else {
    mods = this.state.numChildren.map( (num, index)=> <Module1 key={index} number={i} />
}

现在有几件事。首先，您实际上不应该使用索引作为键，可以confuse react。

第二，我可能会将功能转移到一个单独的方法中，以减少混乱。

第三，对此我还是很困惑，但是可能有一种更动态地指定组件名称的方法，而不是笨拙的if语句，但是此方法目前使我逃脱了，尽管{{ 3}}。

Answer 2

为什么不在状态下使用double: true，而不是使用type属性，而是在单击按钮时在“单”和“双”之间切换：

function ModuleOne() {
  return <div>Module One</div>;
}

function ModuleTwo() {
  return <div>Module Two</div>;
}

function ParentComponent(props) {
  return (
    <div id="app">
        <button type="button" onClick={props.singleContent}>Add single</button>
        <button type="button" onClick={props.doubleContent}>Add double</button>
        <div id="viewport">
            {props.children}
        </div>
    </div>
  );
}

class App extends React.Component {

  state = {
    numChildren: 0,
    type: undefined
  }

  isSingleContent = () => {
    this.setState({
      type: 'single',
      numChildren: this.state.numChildren + 1
    });
  }

  isDoubleContent = () => {
    this.setState({
      type: 'double',
      numChildren: this.state.numChildren + 1
    });
  }

  render() {
    const mods = [];
    for (var i = 0; i < this.state.numChildren; i += 1) {
      if (this.state.type === 'double') {
        mods.push(<ModuleTwo key={i} number={i} />);
      }
      else {
        mods.push(<ModuleOne key={i} number={i} />);
      }
    };
    return (
      <ParentComponent
        singleContent={this.isSingleContent}
        doubleContent={this.isDoubleContent}
      >{mods}
      </ParentComponent>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

从React渲染函数内部的IF语句返回

下面是我的应用程序，其中包含if语句

和父组件

2 个答案: