將數組值從一個類傳遞到另一個類

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>

自動分號插入發生，實際運行的是：

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