Question

我正在创建一个页面，如果用户单击add more按钮，则应添加一个与用户单击次数相同的文本框

我在创建texbox的地方创建了一个组件。我试图在单击按钮时将此组件呈现为另一个组件，但是它不起作用。为什么？

class Addmore extends React.Component {
  render() {
    return (
      <div>
        <label className="float-left"> CC</label>
        <input type="text" class="form-control" />
      </div>
    );
  }
}

class abc extends React.Component {
    constructor(props)
    {
        super(props);
    }
  state = {
    addcomp: false
  };

  click() {
    this.setState({
        addcomp: true,
      });
     var x= document.getElementById("more");
     x.parentNode.appendChild(<Add/>);
  }
  render() {
    return (
            <div class="row">
            <div class="col-3">
            <label className="float-left"> BU</label>
             <input type="text" class="form-control" />


             <div id="more">

              //HERE I HAVE TO RENDER ADDMORE
                         COMPONENT

             </div>

             <div class="col-3">
                  <button type="button" onClick={this.click.bind()}>
                                Add more
                  </button>
             </div>
    );
  }
}
export default abc;

Answer 1

您应该让React渲染所有内容，而您的工作只是告诉React要渲染什么，以及您的情况是多少次。为此，可以使用counter来跟踪应在<Example>组件内“注入”动态添加的数量。

这里需要思想转变，因为在您的示例中，您来自一个认为单击处理程序本身应该修改DOM的地方，而在React中这是一个反模式。

相反，您应该使用 state ，这意味着点击处理程序应更新主机组件的状态，这将触发重新渲染（这是React的工作方式），并且在下一个渲染周期，您添加的组件将被渲染与计数器值一样多的次数，因为该计数器更改是触发重新渲染的原因。

在React中，props和state是触发重新渲染的方式，并且任何DOM修改都应通过更改内部组件的状态或通过从父组件发送不同的props来完成。

在下面的示例中，我不使用类，而是使用 Hooks ，因为我已经停止使用<一旦钩子被释放，em> class 就会全部消失，因为我认为它更干净：

// Get a hook function
const {useState, useCallback} = React;

// The added element component
const AddedElement = () => <div><input placeholder='text box' /></div>

// The "app" component
const Example = () => {
  const [count, setCount] = useState(0);

  return <div>
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
    { Array(count).fill(<AddedElement />) }
  </div>
};

// Render 
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

如果您对如何反复渲染相同的组件感兴趣，我已经在以下问题中对此问题写过答案：How can I render repeating React elements?

单击按钮将组件添加到另一个组件

1 个答案: