为何无法在React.Component子类LevelAssignment实例上调用setLevel方法？

你遇到的核心问题是：levelAssignmentList里存储的是JSX元素（<LevelAssignment key={i} />），而非LevelAssignment类的实际实例对象。

结合Java背景理解 #

这和Java里的逻辑类似：你相当于把LevelAssignment这个“类的定义”存进了数组，而不是通过new LevelAssignment()创建的实例对象。在Java里你没法直接通过类定义调用实例方法，React里同理——JSX只是React用来描述UI的“模板”，只有当React渲染它时，才会创建对应的组件实例，直接操作JSX元素拿不到组件的方法。

解决方案 #

方案1：使用Refs获取组件实例

通过useRef创建数组来存储每个组件的引用，这样就能拿到真实的组件实例并调用方法：

const App = () => {
  const handleSubmit = (dataItem: { [name: string]: any }) =>
    alert(JSON.stringify(dataItem, null, 2));
  
  // 创建ref数组存储组件实例
  const levelRefs = React.useRef([]);

  const onGo = (e) => {
    const assignment0 = levelRefs.current[0];
    if (assignment0) {
      assignment0.setLevel({level_id: 0});
    }
  };

  return (
    <Form
      onSubmit={handleSubmit}
      render={(formRenderProps: FormRenderProps) => (
        <FormElement style={{ maxWidth: 650 }}>
          <fieldset>
            <div className="mb-3">
              {/* 循环渲染时绑定ref */}
              {[...Array(3)].map((_, index) => (
                <LevelAssignment 
                  key={index} 
                  ref={el => levelRefs.current[index] = el} 
                />
              ))}
            </div>
          </fieldset>
          <div>
            <button type={'button'} onClick={onGo}>
              Go
            </button>
          </div>
        </FormElement>
      )}
    />
  );
};

方案2：状态提升（更符合React设计理念）

把需要管理的level状态放到父组件App中，通过props传递给子组件，避免直接操作子组件实例——这是React推荐的数据流方式：

class LevelAssignment extends React.Component {
  render() {
    return (
      <div>
        <Field component={Input} label={this.props.label} />
      </div>
    );
  }
}

const App = () => {
  const handleSubmit = (dataItem: { [name: string]: any }) =>
    alert(JSON.stringify(dataItem, null, 2));
  
  const [levels, setLevels] = React.useState(Array(3).fill(null));

  const onGo = (e) => {
    setLevels(prev => {
      const newLevels = [...prev];
      newLevels[0] = {level_id: 0};
      console.log('setLevel', newLevels[0]);
      return newLevels;
    });
  };

  return (
    <Form
      onSubmit={handleSubmit}
      render={(formRenderProps: FormRenderProps) => (
        <FormElement style={{ maxWidth: 650 }}>
          <fieldset>
            <div className="mb-3">
              {levels.map((level, index) => (
                <LevelAssignment 
                  key={index} 
                  label={`Level ${index}`}
                  currentLevel={level}
                />
              ))}
            </div>
          </fieldset>
          <div>
            <button type={'button'} onClick={onGo}>
              Go
            </button>
          </div>
        </FormElement>
      )}
    />
  );
};

总结 #

• JSX元素≠组件实例，不能直接调用其成员方法
• 优先使用状态提升管理数据，符合React单向数据流的设计模式
• 若必须操作组件实例，用Refs获取真实的组件对象

内容的提问来源于stack exchange，提问作者Black