如何用反應渲染多個按鈕

Question

我在登錄頁面上有一個“登錄”按鈕，我想在同一個登錄頁面上添加另一個“注冊”按鈕，起初它有效，我能夠放置登錄按鈕，但我找不到放置的方法注冊按鈕。 我已經將兩者放在同一個render()中，但它不起作用，就像 2 個“提交”按鈕，這不是我想要的。 我嘗試以另一種方式進行操作，因為它在下面的代碼中，它沒有顯示任何錯誤，但是按鈕沒有呈現在頁面上，它沒有出現。 誰能幫我這個？

function Form({ template, onSubmit }: any) {

const { title, fields } = template;

const [buttonFields, setButtonFields] = useState([])


const renderFields = (fields: any) => {
    return fields.map((field: any) => {
      const { title, type } = field;
      switch (type) {   
        case 'buttonLogin':
          return (
            <Button
            key={title.id}
              style={{}}
            >
              Enter
            </Button>
          )
      }
    })
  }

const renderFieldsButton = (buttonFields: any) => {
    return buttonFields.map((buttonField: any) => {
      const { type, titleRegisterButton } = buttonField;
      switch (type) {
        case 'buttonRegister':
          return (
            <Button
            key={titleRegisterButton.id}
              style={{}}
            >
              Register
            </Button>
          )
      }
    })
  }

return (
    <>
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          {renderFields(fields)}
        </form>
          {renderFieldsButton(buttonFields)}
      </div>
    </>
  )
}

export default Form

---

function LoginForm(props: any) {

  const template = {
    title: '',
    fields: [
      {
        title: 'Login Button',
        type: 'buttonLogin',
      },
    ]
  }


  const registerButton = {
    titleRegisterButton: 'Register',
    buttonFields: [
      {
        titleRegisterButton: 'Register Button',
        type: 'buttonRegister'
      }
    ]
  }

  return (
    <div >
      <Form
        template={template}
        registerButton={registerButton}
        onSubmit={onSubmit}
      />

    </div>
  )
}

function onSubmit(values: any) {
  console.log(values)
}

export default LoginForm

Answer 1

“注冊”按鈕當前未出現，因為它缺少<Form>的registerButton屬性與其buttonFields state 之間的關聯。

后面的 state 似乎沒有必要，所以讓我們去掉它，讓代碼先工作。 稍后，如果用例需要它，您可以重新引入它。

然后你只需要直接從 props 中獲取注冊按鈕數據，類似於template prop 已經完成的操作：

function Form({
  template,
  registerButton, // Get data from component props
  onSubmit
}: any) {
  // etc.
  // You may remove the unused buttonFields state

  const { titleRegisterButton, buttonFields } = registerButton;

  return (
    <>
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          {renderFields(fields)}
        </form>
          {renderFieldsButton(buttonFields)} // Use data from props
      </div>
    </>
  )
}

正如@CertainPerformance 在問題評論中所建議的那樣，您將從嘗試正確鍵入變量（包括組件道具）中受益匪淺。 在這種情況下，它會捕獲額外的未指定道具。 以及其他不一致之處，例如缺少title.id 。

例如，您可以這樣做：

// Login
interface IField {
  title: string;
  type: "buttonLogin" | "(otherPossibleType)";
}
interface ITemplate {
  title: string;
  fields: IField[];
}
// Register
interface IFieldRegister {
  titleRegisterButton: string;
  type: "buttonRegister" | "(otherPossibleType)";
}
interface ITemplateRegister {
  titleRegisterButton: string;
  buttonFields: IFieldRegister[];
}

// Form component
function Form({
  template,
  registerButton,
  onSubmit
}: {
  template: ITemplate;
  registerButton: ITemplateRegister;
  onSubmit: (values: any) => void; // You could further type the argument according to your code base
}) {
  // etc.
  const renderFields = (fields: IField[]) => {
    return fields.map((field) => { // Let TS infer the type of `field`
      // etc.
    });
  }

  const renderFieldsButton = (buttonFields: IFieldRegister[]) => {
    return buttonFields.map((buttonField) => {
      // etc.
    });
  }
}