javascript - 如何在 ReactJs 中循环和渲染数组中的不同组件？

Question

从 render 方法渲染不同的组件需要什么实现。正如您在下面看到的那样，Survey 组件 接收一个包含不同组件名称(可能是 Input、CheckList、Dropdown、File)的数组。作为属性传递给 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>
        );

    }
}

还要注意 map 函数中的 Elem。说到react component jsx需要首字母大写。因此，无论您在 Elem 的位置保留什么变量，您都应该始终保持第一个字母大写。