Question

from functools import reduce

new_val = 10  # value to use for list2 (Nval)
new_list1 = []
new_list2 = []
reduce(lambda x, y: ((y[0] == 5 and x == 5) and (new_list1.append(1) or new_list2.append(new_val))) or
                     new_list1.append(y[0]) or new_list2.append(y[1]) or y[0],
         zip(list1, list2), (None, new_list1, new_list2))

我有错误：class App extends Component { render() { return ( ........ { let tags = this.state.tags; for (var key in tags) { <p className="h3 text-primary">{tags[key]}</p> }} ......... ) } }。我不明白我哪里弄错了。请帮帮我。

Answer 1

替换

{
 let tags = this.state.tags;
 for (var key in tags) {
   <p className="h3 text-primary">{tags[key]}</p>
 }
}

与 {Object.keys(tags).map(key => <p key={key} className="h3 text-primary">{tags[key]}</p>)};

Answer 2

首先，您的应用中没有状态。如果没有状态，你就不能使用this.state.something。

其次，不要在渲染函数中使用for循环。根据其他答案的建议，有更好的方法可以做到这一点。但如果你真的想这样做：

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  render() {
    const { tags } = this.state;
    const arr = [];
    for (var key in tags) {
      arr.push(<p className="h3 text-primary">{tags[key]}</p>);
    }
    return (
      arr
    );
  }
}

但是，渲染方法太拥挤了，让我们做一点清洁。

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  getTags = () => {
    const { tags } = this.state;
    const arr = [];
    for (var key in tags) {
      arr.push(<p className="h3 text-primary">{tags[key]}</p>);
    }
    return arr;
  }

  render() {
    return (
      this.getTags()
    );
  }
}

但是有更好的方法可以按照建议的方式迭代.map或Object（键）之类的内容然后迭代.map。

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  render() {
    const { tags } = this.state;
    return (
      Object.keys(tags)
        .map(key => <p key={key}>{tags[key]}</p>)
    );
  }
}

但同样，您可以使用单独的函数为渲染方法获得更清晰的结构。

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  getTags = () => {
    const { tags } = this.state;
    return Object.keys(tags)
      .map( key => <p key={key}>{tags[key]}</p>)
  }

  render() {
    return (
      this.getTags()
    );
  }
}

干净整洁！别忘了如果你需要其他JSX，你必须使用{}来使用javascript表达式。例如，如果您想要div的顶部p顶部怎么办？

class App extends React.Component {
  state = {
    tags: {
      foo: "somefoo",
      bar: "somebar",
      baz: "somebaz"
    }
  };

  getTags = () => {
    const { tags } = this.state;
    return Object.keys(tags)
      .map( key => <p key={key}>{tags[key]}</p>)
  }

  render() {
    return (
      <div>
        { this.getTags() }
      </div>
    );
  }
}

JSX中的语法错误

2 个答案: