React.js：如何在點擊時附加組件？

Question

我是 React 的新手，我對一些基本的東西感到困惑。

在呈現 DOM 之后，我需要在單擊事件上將一個組件附加到 DOM。

我的初步嘗試如下，它不起作用。 但這是我想過嘗試的最好的事情。 （提前為將 jQuery 與 React 混合使用而道歉。）

    ParentComponent = class ParentComponent extends React.Component {
      constructor () {
        this.addChild = this.addChild.bind(this);
      }

      addChild (event) {
        event.preventDefault();
        $("#children-pane").append(<ChildComponent/>);
      }

      render () {
        return (
          <div className="card calculator">
            <p><a href="#" onClick={this.addChild}>Add Another Child Component</a></p>
            <div id="children-pane">
              <ChildComponent/>
            </div>
          </div>
        );
      }
    };

希望很清楚我需要做什么，我希望你能幫助我找到一個合適的解決方案。

Answer 1

使用 React 時不要使用 jQuery 來操作 DOM。 React 組件應該呈現給定狀態下它們應該是什么樣子的表示； React 本身會處理轉換成的 DOM。

您想要做的是將“決定渲染內容的狀態”存儲在鏈的更高位置，並將其向下傳遞。 如果您正在渲染n孩子，則該狀態應該由包含您的組件的任何內容“擁有”。 例如：

class AppComponent extends React.Component {
  state = {
    numChildren: 0
  }

  render () {
    const children = [];

    for (var i = 0; i < this.state.numChildren; i += 1) {
      children.push(<ChildComponent key={i} number={i} />);
    };

    return (
      <ParentComponent addChild={this.onAddChild}>
        {children}
      </ParentComponent>
    );
  }

  onAddChild = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    });
  }
}

const ParentComponent = props => (
  <div className="card calculator">
    <p><a href="#" onClick={props.addChild}>Add Another Child Component</a></p>
    <div id="children-pane">
      {props.children}
    </div>
  </div>
);

const ChildComponent = props => <div>{"I am child " + props.number}</div>;

Answer 2

正如@Alex McMillan 所提到的，使用 state 來規定應該在 dom 中呈現的內容。

在下面的示例中，我有一個輸入字段，我想在用戶單擊按鈕時添加第二個字段，onClick 事件處理程序調用 handleAddSecondInput() 將 inputLinkClicked 更改為 true。 我正在使用三元運算符來檢查真實狀態，它呈現第二個輸入字段

class HealthConditions extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      inputLinkClicked: false
    }
  }

  handleAddSecondInput() {
    this.setState({
      inputLinkClicked: true
    })
  }


  render() {
    return(
      <main id="wrapper" className="" data-reset-cookie-tab>
        <div id="content" role="main">
          <div className="inner-block">

            <H1Heading title="Tell us about any disabilities, illnesses or ongoing conditions"/>

            <InputField label="Name of condition"
              InputType="text"
              InputId="id-condition"
              InputName="condition"
            />

            {
              this.state.inputLinkClicked?

              <InputField label=""
                InputType="text"
                InputId="id-condition2"
                InputName="condition2"
              />

              :

              <div></div>
            }

            <button
              type="button"
              className="make-button-link"
              data-add-button=""
              href="#"
              onClick={this.handleAddSecondInput}
            >
              Add a condition
            </button>

            <FormButton buttonLabel="Next"
              handleSubmit={this.handleSubmit}
              linkto={
                this.state.illnessOrDisability === 'true' ?
                "/404"
                :
                "/add-your-details"
              }
            />

            <BackLink backLink="/add-your-details" />

          </div>
         </div>
      </main>
    );
  }
}