Question

从render方法渲染不同组件需要什么实现。正如您在下面看到的，这个想法是Survey component接收一个包含不同组件名称的数组（可以是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>
        );

    }
}

另请注意地图功能中的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循环中，您将从第一个组件的函数返回。将它们添加到数组，然后返回该数组。另外，我在这里使用了一个功能无状态组件。我没有看到课程开销的必要性。

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

3 个答案: