Question

当尝试从我的render方法返回（更复杂的）值时，我总是不断产生各种错误。其中大多数我能够解决。但是这一次，该组件根本不呈现，但是...没有控制台错误。

在返回单个

元素时，我理解标准的return（...）语法，但是在某些情况下，我不完全理解为什么它会破坏我的代码。

我正在尝试的代码示例：

class RenderMe1 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { list: ['A','B','C'] }
    }
    render() {
        return(
        <div>
            <div>
                /* === Works === */
                { this.state.list.map((object, index) => this.state.list[index] ) }
            </div>
        </div>);
    }
}

class RenderMe2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { list: ['0','0','0'] }
    }
    render() {
        return(
        <div>
            <div>
                /* === Doesn't Work === */
                { this.state.list.map((object, index) => { this.state.list[index] } ) }
            </div>
        </div>);
    }
}

ReactDOM.render(<RenderMe1 />, document.getElementById("root"));  // works
ReactDOM.render(<RenderMe2 />, document.getElementById("root2")); // doesn't work

出于练习目的，我使用浏览器内置babel插件，因此使用JSX语法。

3 个答案:

答案 0 :(得分：3)

答案 1 :(得分：2)

答案 2 :(得分：1)

Answer 1

您的第一个示例是隐式返回。意思是，您不需要指定return关键字，因为您没有使用花括号，因此它会返回表达式

您拥有的第二个不返回任何内容。这是修改后的代码

class RenderMe2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = { list: ['0','0','0'] }
    }
    render() {
        return(
        <div>
            <div>

                { this.state.list.map((object, index) => { return this.state.list[index] } ) }
            </div>
        </div>);
    }
}

我想您这样做是因为它是一个示例，但是您可以这样做

this.state.list.map(listItem => listItem);

Answer 2

括号内的代码仍然可以正常工作，原因是虽然JavaScript 会计算该语句，但不会返回该语句。

在这种情况下，问题出在箭头功能本身。后面有一条特定的规则箭头：跳过{}括号时，实际上将语句视为返回值，而不必使用return关键字。这样可以清除一些代码。但是，一旦添加了{}括号，就必须使用return关键字显式返回其中的内容。以下内容将解决您的问题：

{ this.state.list.map((object, index) => { return(this.state.list[index]) } ) }

请记住，React实际上仍然只是JavaScript（通常是ES6 +）。至于在React中专门返回迭代器，请参阅此nested components教程，该教程通过一些正确的返回用例来指出问题。您只需执行该语句即可。

希望这会有所帮助。

Answer 3

第二种方法不起作用的原因是带有箭头功能的语法精巧。

当您用箭头{和}包装包含单个语句的箭头函数时，该箭头函数等效于返回undefined。

例如：

(object, index) => { this.state.list[index] }

等同于：

function(object, index) { 

   this.state.list[index];

   // Notice that nothing is returned
}

相反，通过排除{和}，就像在工作版本中一样：

{ this.state.list.map((object, index) => this.state.list[index] ) }

实际上等同于这样做：

{ this.state.list.map(function(object, index) {

   // The function is returning something
   return this.state.list[index]
}

这种带有非return箭头功能的{ .. }行为是“免费的”，这是第一个版本起作用而后一个版本失败的原因。有关更多信息，请see this MDN article

从嵌套组件返回映射迭代器的正确方法是什么？

3 个答案: