Reactjs 如何在antD中分步传递函数？

代码：

我有两个疑问：

如何在内容中传递函数（

content1（），content2（）

）

如何限制“下一步”按钮（仅在中满足特定条件时执行） （本页）

---

你的第一个疑问

您将返回jsx，以便只需执行

即可渲染它。我建议将其作为类组件之外的组件。将其也设为首字母大写：

const Content1 = ({ onClick }) => {
  return (
    <div>
      <div>Content 1</div>
      <button onClick={onClick}>Click me to go to content 2</button>
    </div>
  );
};

class App extends React.Component {
  state = {
    current: 0,
    step: [
      {
        title: "First",
        content: <Content1 onClick={() => this.click()} />
      },
      {
        title: "Second",
        content: <Content2 />
      },
      {
        title: "Last",
        content: <Content3 />
      }
    ],
    isPageOneOk: false
    
    ...

};

请注意，在每个步骤中，当前内容都将卸载到dom

以下是完整的示例代码：

click = () => {
  alert("you can go now to content 2");
  this.setState({
    isPageOneOk: true
  });
};

next = () => {
  const {current, isPageOneOk} = this.state;

  if (current === 0 && !isPageOneOk) {
    alert("Can't go to next page")
  } else {
    //increment current state to go to next content
    const current = this.state.current + 1;
    this.setState({ current });
  }
};