1

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"))

我的目标是向身体追加两个数组值。

Answer 1

好吧，div是空的，你没有在div中显示地图的结果。这就是为什么你没有看到任何东西。一种解决方案是在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"))

Answer 2

这里有两个问题：

1

您使用map创建的元素需要在内移动您要返回的<div>。

此表达式

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

作为声明对其自身没有影响。 map会将字符串列表转换为<Append>元素列表，但它不会执行任何内容。

2

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

当你写这个时，

return
   <div></div>

automatic semi-colon insertion发生了，实际运行的是：

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>;
  }
}

Answer 3

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"))

Answer 4

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>

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"));

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

5 个答案:

1

2