Question

我试图将元素放入CustomModal变量中：

const CustomModal = (<div className="peoplelistpage-modal">
        <div className="peoplelistpage-modal-content-empty" />
        <div className="peoplelistpage-modal-content">
          <CustomForm
            krNameInput={this.state.krNameInput}
            handleKrNameInput={this.handleKrNameInput}
            enNameInput={this.state.enNameInput}
            handleEnNameInput={this.handleEnNameInput}
            positionInput={this.state.positionInput}
            handlePositionInput={this.handlePositionInput}
            departmentInput={this.state.departmentInput}
            handleDepartmentInput={this.handleDepartmentInput}
            doingInput={this.state.doingInput}
            handleDoingInput={this.handleDoingInput}
            btnValue="add"
            onBtnClick={this.handlePersonAddBtn}
          />
        </div>
        <div className="peoplelistpage-modal-content-empty" />
      </div>);

并在render（）中像这样使用它：

render() {
//...
{ CustomModal }
//...

但是，出现错误：

react-dom.development.js：57未捕获的永久违规：对象作为React子对象无效（找到：带有键{CustomModal}的对象）。如果要渲染子级集合，请改用数组。

有什么方法可以将元素放入变量中进行命名？

谢谢。

----更新----- 这是我完整的render代码：

  render() {
    const CustomModal = (<div className="peoplelistpage-modal">
        <div className="peoplelistpage-modal-content-empty" />
        <div className="peoplelistpage-modal-content">
          <CustomForm
            krNameInput={this.state.krNameInput}
            handleKrNameInput={this.handleKrNameInput}
            enNameInput={this.state.enNameInput}
            handleEnNameInput={this.handleEnNameInput}
            positionInput={this.state.positionInput}
            handlePositionInput={this.handlePositionInput}
            departmentInput={this.state.departmentInput}
            handleDepartmentInput={this.handleDepartmentInput}
            doingInput={this.state.doingInput}
            handleDoingInput={this.handleDoingInput}
            btnValue="add"
            onBtnClick={this.handlePersonAddBtn}
          />
        </div>
        <div className="peoplelistpage-modal-content-empty" />
      </div>);
    const { people } = this.props.people.state;

    return (
      <React.Fragment>
        {/* check login */}
        {this.props.auth.state.isLoggedIn ? (
          { CustomModal }
            ) : (
              <div />
            )}

            <div className="peoplelistpage-main">
              <h1 className="peoplelistpage-title">people list</h1>
              <div className="peoplelistpage-list-container">
                {people.map((person, index) => (
                  <ul className="peoplelistpage-list-ul" key={index}>
                    <li className="peoplelistpage-list-li">
                      {`${index + 1}.`}{" "}
                      <Link to={`${this.props.location.pathname}/${person.id}`}>
                        {person.kr_name}
                      </Link>{" "}
                      <button onClick={this.handlePersonDeleteBtn(person.id)}>
                        <DeleteUserIcon />
                      </button>
                    </li>
                  </ul>
                ))}
              </div>
              <button onClick={this.openModal}>add</button>
            </div>
          </div>
        ) : (
          <CustomNotPermittedForm />
        )}
      </React.Fragment>
    );
  }

Answer 1

是的，您可以使用[HttpGet("get/LeaveCommand/{id}")]或div将元素分组在一起。 React.Fragment被添加到DOM，而片段未添加。但是为了使用状态进行此操作，您将必须使用一个函数，因为静态变量不会使用状态值进行更新。

div

用法

const CustomModal = () => (
      <React.Fragment>   // <-- or div
        <div className="peoplelistpage-modal">
        <div className="peoplelistpage-modal-content-empty" />
        <div className="peoplelistpage-modal-content">
          <CustomForm
            krNameInput={this.state.krNameInput}
            handleKrNameInput={this.handleKrNameInput}
            enNameInput={this.state.enNameInput}
            handleEnNameInput={this.handleEnNameInput}
            positionInput={this.state.positionInput}
            handlePositionInput={this.handlePositionInput}
            departmentInput={this.state.departmentInput}
            handleDepartmentInput={this.handleDepartmentInput}
            doingInput={this.state.doingInput}
            handleDoingInput={this.handleDoingInput}
            btnValue="add"
            onBtnClick={this.handlePersonAddBtn}
          />
        </div>
        <div className="peoplelistpage-modal-content-empty" />
      </div>
    </React.Fragment>
);

Answer 2

您没有告诉React如何渲染该组件，您需要像这样返回它：

render() {
  return (
     <div>
       return (
         <CustomModal /> 
       );
     </div>
  );
}

将元素放入变量中进行命名（反应）

2 个答案: