单击按钮时在另一个组件中附加一个 React 组件

Question

我有一个大组件 <User> 和一个小组件 <Task> 我想给一个大组件一个按钮，然后点击它附加组件 <Task> <User>

用户.jsx

 <div>
  <Task />
  <button onClick={`Function here to append a new Task component`}>
    New Task
  </button>
</div>

任务.jsx

 <div>
  This is New task
</div>

原文由 Zeyad Etman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以执行以下操作。

 const User = () => {
  return <p>User</p>
}

class App extends React.Component {

  state = {
    users: []
  }

  addUser = () => {
    this.setState({
      users: [...this.state.users, <User />]
    })
  }

  render() {
    return (
      <div>
        <button onClick={this.addUser}>Add User</button>
        {this.state.users}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

这里 有一个代码沙箱。

原文由 Paul Fitzgerald 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你应该让 React 渲染一切，你的工作只是告诉 React 渲染什么，在你的情况下，渲染多少次。为此，可以使用 counter 来跟踪应在 <Example> 组件中“注入”多少动态添加。

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

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

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

---

在下面的示例中，我 不 使用 Classes ，而是使用 Hooks ，因为一旦 hooks 被释放，我就完全停止使用 class ，因为我认为它更干净：

 const {useState, Fragment} = React

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

// The parent component
const App = () => {
  const [count, setCount] = useState(0) // Name it however you wish

  return <Fragment>
    <button onClick={() => setCount(count + 1)}>Click me</button>
    { [...Array(count)].map((_, i) => <AddedElement key={i} />) }
  </Fragment>
}

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

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

如果您对如何 重复渲染 同一个组件感兴趣，我已经在这个问题中写了一个答案： How can I render repeating React elements?

原文由 vsync 发布，翻译遵循 CC BY-SA 4.0 许可协议