从一个类传递数组值到另一个类

Question

我是ReactJs的新手，遇到了一个问题，就是数组值没有显示在页面上。

class App extends React.Component{
  render(){
    let arr = ["one", "two"]
    arr.map(n => <Append val={n}/>)

    return
       <div></div>
  }
}

class Append extends React.Component{
  render(){

    return(
     <div>
        {this.props.val}
      </div>
     )

  }
}

ReactDOM.render(<App />,document.getElementById("div"))

我的目标是将这两个数组的值附加到body中。

- user8156106

Answer 1

嗯，div为空，你没有显示映射结果在div中。这就是你看不到任何东西的原因。一种解决方法是将map append到div中。另外，如果你想在下一行显示div，请确保将其包装在括号中。否则，它会打印undefined并忽略预期的返回值（即div等）。

class App extends React.Component{
  render(){
    let arr = ["one", "two"]
    return (
       <div>{arr.map(n => <Append val={n}/>)}</div>
    );
  }
}

class Append extends React.Component{
  render(){
    return(
     <div>
        {this.props.val}
      </div>
     );
  }
}

ReactDOM.render(<App />,document.getElementById("div"))

- user8348467

---

我遇到了未捕获的错误：压缩后的React错误＃37; - user8156106

你知道为什么吗？ - user8156106

Answer 2

你有两个问题：

1

使用map创建的元素需要移动到你返回的<div>内部。

以下表达式

arr.map(n => <Append val={n}/>)

作为一个语句本身没有影响。 map 将字符串列表转换为 <Append> 元素列表，但它并不对它们进行任何操作。

2

return 和 <div> 需要在同一行，或者您需要像其他 render 函数中所做的那样使用括号。

当你写下这个时，

return
   <div></div>

自动分号插入会发生在JavaScript中，实际执行的内容是这样的：

return;
   <div></div>

所以你返回的是undefined，而不是你想要的<div>元素。

---

所以修复后的App类如下：

class App extends React.Component{
  render(){
    let arr = ["one", "two"];
    return <div>{arr.map(n => <Append val={n}/>)}</div>;
  }
}

- Chris Martin

---

我遇到了未捕获的错误：压缩后的React错误＃37; - user8156106

Answer 3

class App extends React.Component{
  render(){
    let arr = ["one", "two"];
    let numbers = [];
    
    arr.map(n => numbers.push(<Append val={n} key={n} />));

    return (
       <div>{numbers}</div>
    );
  }
}

class Append extends React.Component{
  render(){
    return(
     <div>
        {this.props.val}
      </div>
     );
  }
}

ReactDOM.render(<App />, document.getElementById("div"));

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

- Alexander Elgin

---

我得到了未捕获的错误：Minified React error #37; - user8156106

@AvaLucas 你使用React和ReactDOM的压缩版本吗？ - Alexander Elgin

@AvaLucas 这就是原因。你有检查错误信息吗？ - Alexander Elgin

是的，就像我之前说的那样，它显示了未捕获的错误：压缩后的React错误＃37； - user8156106

Answer 4

class App extends React.Component{
  render(){
    let arr = ["one", "two"];
   // arr.map(n => <Append val={n}/>); 
    let appendValues = arr.map(n => <Append val={n}/>);

    return
       <div>{appendValues}</div>
  }
}

class Append extends React.Component{
  render(){

    return(
     <div>
        {this.props.val}
      </div>
     )

  }
}

ReactDOM.render(<App />,document.getElementById("div"))

- Vasi

Answer 5

当你再次查看document.getElementById函数时，似乎你没有为页面上的元素提供正确的id，而是提供了一个div元素的名称。

然后看一下array.map，.map返回一个新的数组，所以你的App组件需要在返回的元素内呈现该数组。

我制作了一个关于你问题的小视频，并添加了一些小提示，如果你感兴趣可以看一下：https://youtu.be/I9U8I1Yn4c4 看看这段代码，获取一些想法，祝你有美好的一天！

const React = require("react");
const ReactDOM = require("react-dom");

class App extends React.Component {
  render() {
    let arr = ["one", "two"];
    return <ul>{arr.map(n => <Append key={n} val={n} />)}</ul>;
  }
}

class Append extends React.Component {
  render() {
    return (
      <li>
        {this.props.val}
      </li>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("content"));

- Fredrik Christenson

---

我遇到了未捕获的错误：压缩后的React错误＃37; - user8156106