Question

我想做这样的事情，但要做出反应。我找到了有关使用道具的解决方案，但没有一个对我有用。基本上我想做的就是以这种方式将子组件添加到父节点，但是在React中...。有什么想法吗？谢谢！

function add(k){
  var div = document.getElementById("div-"+k);
  var elm = "<div style='background-color: red'>text </div>";
  div.insertAdjacentHTML("beforeend", elm);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">




<div class="container">
  
  <div class="row">
    <div class="col-sm-4" id="div-0" style="background-color: blue">
      <div class="card ">
        <button type="button" class="btn btn-primary" onclick="add(0)">add A</button>
      </div>
    </div>
    
    <div class="col-sm-4" id="div-1" style="background-color: green">
      <div class="card bg-primary">
        <button type="button" class="btn btn-primary" onclick="add(1)">add B</button>
      </div>
    </div>
    
    <div class="col-sm-4" id="div-2">
      <div class="card bg-primary">
        <button type="button" class="btn btn-primary" onclick="add(2)">add C</button>
      </div>
    </div>
    
    
  </div>
  

</div>

Answer 1

还有很长的路要走。这是您要找的东西吗？

<div className="row">
        <Column data="A" bgColor="blue" />
        <Column data="B" bgColor="green" />
        <Column data="C" />
</div>

更新2：使用钩子

function Column(props) {
  const [count, setCount] = React.useState(0);
  let newElements = [];
  for (let i = 0; i < count; i++) {
    newElements.push(
      <div key={i} style={{ backgroundColor: "red" }}>
        text
      </div>
    );
  }
  return (
    <div
      className="col-sm-4"
      style={{ backgroundColor: props.bgColor }}
      onClick={() => setCount(count + 1)}
    >
      add {props.data}
      {newElements}
    </div>
  );
}

更新：在点击时创建多个元素

import React from "react";

class Column extends React.Component {
  state = {
    addElementClicked: false,
    clickedCount: 0
  };
  onClick = () => {
    this.setState(prevState => ({
      addElementClicked: true,
      clickedCount: prevState.clickedCount + 1
    }));
  };
  getChildren = () => {
    let content = [];
    console.log(this.state.clickedCount);
    for (let i = 0; i < this.state.clickedCount; i++) {
      const newEl = (
        <div style={{ backgroundColor: "red" }} key={i}>
          text
        </div>
      );
      content.push(newEl);
    }
    return content;
  };
  render() {
    return this.state.addElementClicked ? (
      <div
        className="col-sm-4"
        style={{ backgroundColor: this.props.bgColor }}
        onClick={this.onClick}
      >
        add {this.props.data}
        {this.getChildren()}
      </div>
    ) : (
      <div
        className="col-sm-4"
        style={{ backgroundColor: this.props.bgColor }}
        onClick={this.onClick}
      >
        add {this.props.data}
      </div>
    );
  }
}

export default Column;

以下将只生一个孩子

//Column.js
import React from "react";

class Column extends React.Component {
  state = {
    addElementClicked: false
  };
  onClick = () => {
    this.setState({
      addElementClicked: true
    });
  };
  render() {
    return this.state.addElementClicked ? (
      <div
        className="col-sm-4"
        style={{ backgroundColor: this.props.bgColor }}
        onClick={this.onClick}
      >
        add {this.props.data}
        <div style={{ backgroundColor: "red" }}>text</div>
      </div>
    ) : (
      <div
        className="col-sm-4"
        style={{ backgroundColor: this.props.bgColor }}
        onClick={this.onClick}
      >
        add {this.props.data}
      </div>
    );
  }
}

export default Column;

Answer 2

class MyColumn extends React.Component {
  state = { count: 0 };

  constructor(props) {
    super(props);
    this.add = this.add.bind(this);
  }
  render() {
    const innerItems = [];
    for (let i = 0; i < this.state.count; i++) {
      innerItems.push(<div style={{backgroundColor: 'red'}}>text </div>);
    }
    return (
      <div className="col-sm-4" style={{backgroundColor: this.props.bgColor}}>
        <div className="card bg-primary">
          <button type="button" className="btn btn-primary" onClick={this.add}>add {this.props.name}</button>
        </div>
        
        {innerItems}
      </div>
    );
  }
  
  add() {
    this.setState(state => ({ count: state.count + 1 }));
  }
}

const row = (
  <div className="row">
    <MyColumn name="A" bgColor={"blue"} />
    <MyColumn name="B" bgColor={"green"} />
    <MyColumn name="C" />
  </div>
);

ReactDOM.render(row, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-grid.css" rel="stylesheet" />



<div class="container" id="app">



</div>

使用react将子组件添加到HTML

2 个答案: