如何在ReactJs中循環並呈現數組中的不同組件？

Question

渲染方法渲染不同的組件需要什麼實現。正如你可以在下面看到的想法是，Survey component收到一個數組，其中包含不同的組件名稱（可能是輸入，檢查列表，下拉菜單，文件）。該數組通過屬性Survey Component正確生成，具體取決於單擊哪個按鈕，但在呈現不同組件時不起作用。我正在使用JsComplete進行測試。

const Dropdown =() =>{ 
    return(
    <div> 
     <select> 
      <option value="initial" selected>Select...</option> 
      <option value="Option ">Option 1</option> 
      <option value="Option ">Option 2</option> 
     </select> 
    </div> 
) 
} 

const Checklist =() =>{ 
    return(
    <div> 
     <h4>Question name</h4> 
     <label> 
      Option 1: 
      <input 
      name="pl" 
      type="checkbox" /> 
     </label> 
     <label> 
      Option 2: 
      <input 
      name="tz" 
      type="checkbox" /> 
     </label> 
    </div> 
) 
} 

const Input =() =>{ 
    return(
    <div> 
     <label> 
      Question name: 
      <input 
      name="input" 
      type="text" /> 
     </label> 
    </div> 
) 
} 

const File =() =>{ 
    return(
    <div> 
     <label> 
      Upload: 
      <input 
      name="file" 
      type="file" /> 
     </label> 
    </div> 
) 
} 

class Survey extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    render(){ 
    var ChildName ; 

    for (var i = 0; i < this.props.components.length; i++) {  
     log("Log:" + this.props.components[i]); 
     ChildName = this.props.components[i]; 
     return <ChildName />; 
    }   

    return (
     false 
    ) 
    } 
}  

class Form extends React.Component { 

    handleSubmit = (name) => {  
    this.props.onSubmit(name);   
    }; 

    render() { 
    return (
     <div id="components"> 
     <button onClick={()=>this.handleSubmit("Input")} name="Input">Input</button> 
     <button onClick={()=>this.handleSubmit("Checklist")} name="Checklist">Checkbox</button> 
     <button onClick={()=>this.handleSubmit("Dropdown")} name="Dropdown">Dropdown</button> 
     <button onClick={()=>this.handleSubmit("File")} name="File">File</button> 
     <div id="new-question">  
     </div> 
     </div> 

    ) 
    } 
} 

class App extends React.Component { 
    state = { 
    components: [] 
    }; 

    addNewElement = (element) => { 
    this.setState(prevState => ({ 
     components: prevState.components.concat(element) 
    })); 
    }; 

    render() { 
    return (
     <div> 
     <Form onSubmit={this.addNewElement} /> 
     <Survey components={this.state.components} />   
     </div> 
    ); 
    } 
} 

ReactDOM.render(<App />, mountNode); 

Answer 1

試試這個。不要在handleSubmit方法中傳遞字符串。相反，通過組件本身是這樣的：

class Form extends React.Component { 

    handleSubmit = (name) => {  
    this.props.onSubmit(name);   
    }; 

    render() { 
    return (
     <div id="components"> 
     <button onClick={()=>this.handleSubmit(Input)} name="Input">Input</button> 
     <button onClick={()=>this.handleSubmit(Checklist)} name="Checklist">Checkbox</button> 
     <button onClick={()=>this.handleSubmit(Dropdown)} name="Dropdown">Dropdown</button> 
     <button onClick={()=>this.handleSubmit(File)} name="File">File</button> 
     <div id="new-question">  
     </div> 
     </div> 

    ) 
    } 
} 

另外，在你調查分量返回這樣

class Survey extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 

     if (this.props.components.length === 0) { 
      return null; 
     } 
     const renderCommpos = this.props.components.map((Elem, index) => { 
      return <Elem key={index} /> 
     }); 

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

    } 
} 

的元素也注意到地圖功能Elem。當涉及到反應組件時，jsx需要首字母大寫。因此，無論您在Elem處保留哪個變量，都應該始終保留第一個字母大寫。

Answer 2

的爲您調查組件渲染方法應該是這樣的：

render(){ 
    const { components } = this.props; 

    return (
    <div> 
     { 
     components.map((c, index) => { 
      return (
      <div key={`one-of-components-${index}`}> 
       {c} 
      </div> 
     ); 
     }) 
     } 
    </div> 
); 
} 

現在，它會返回到這個道具的所有組件。

Answer 3

試試看。

const Survey = ({ components }) => { 
    const Components = components.map(
     (component, index) => { 
      return (
       <div key={ index }> 
        { component } 
       </div> 
      ); 
     } 
    ); 

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

在for循環中，您將從第一個組件的函數返回。將它們添加到數組中，然後返回數組。另一方面，我在這裏使用了一個功能無狀態的組件。我沒有看到課堂開銷的需要。