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

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 中显示 map 的结果。所以这就是为什么你什么都看不到的原因。一种解决方案是在 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"))