Question

我让这段代码与react一起工作，并且变得非常混乱，所以我想知道是否有一种方法可以使这段代码和其他与看上去更干净的代码相似。

render() {
    let result = null;
    var obj = this.state.welcome;
    let test = null;

    if (this.state.isReal) {
      test = Object.entries(obj).map(([key, value], index) => {
        return (
          <li key={index}>
            Word: "{key}" repeats: {value} times
          </li>
        );
      });
      result = (
        <Aux>
          <h3>Title</h3>
          <ul>{test}</ul>
        </Aux>
      );
    }
    return (
      <Aux>
        <div className="bframe">
          <div className="form" />
          {result}
        </div>
        <Footer />
      </Aux>
    );
  }

我想知道是否有可能在'return'语句之前移动所有内容，最好放在单独的文件中。我尝试制作一个功能组件并传递道具，但是我无法在那里做循环。有提示吗？

Answer 1

您可以将代码简化为以下内容：

render() {
    const { welcome, isReal } = this.state

    return (
        <Aux>
            <div className="bframe">
                <div className="form" />
                {isReal && 
                    <Aux>
                        <h3>Title</h3>
                        <ul>
                            {Object.entries(welcome).map(([key, value]) => 
                                <li key={key}>
                                    Word: "{key}" repeats: {value} times
                                </li>
                            )}
                        </ul>
                    </Aux>
                }
            </div>
            <Footer />
        </Aux>
    );
}

请勿使用var，默认情况下使用const，如果要修改变量，请使用let。

您可以使用内联if：&&选择是否渲染元素。

您的函数也是不必要的，因为可以用内联JS代替。

您的map也可以从x.map(a => { return <div/> }减少到x.map(a => <div/>。

您还可以将每个项目的key用作React key，因为它们在对象中都必须是唯一的。

Answer 2

也许类似于以下内容

const Result = ({real, welcome}) => {
  if (!real) return null;
  
  const words = Object.entries(welcome).map(([key, value], index) => <li key={index}>
            Word: "{key}" repeats: {value} times
          </li>
        );
      
  return (
    <Aux>
      <h3>Title</h3>
      <ul>{words}</ul>
    </Aux>
  );
}

class YourComponent extends React.Component {
 // ...
  render() {
    const {isReal, welcome} = this.state;

    return (
      <Aux>
        <div className="bframe">
          <div className="form" />
          <Result real={isReal} welcome={welcome}/>
        </div>
        <Footer />
      </Aux>
    );
  }
}

使用循环和映射时清理代码

2 个答案: