• ..

Google Apps Script

    React と AtomicDesign - Molecule編

    中で Atom を作ってある程度の塊のブロックを返す関数が Molecule と考えます。

    // 定義
    const createLoginForm = (fields: Field[]) => {
      const LoginForm = () => (
        <Form>
          {fields.map(field => {
            return <Input key={field.name} />;
          })}
        <Form>
      );
    
      LoginForm.displayName = 'LoginForm';
    
      return <LoginForm />;
    }

    例えば Molecule を使う時はこのように、単に変数埋め込み記法を使うだけです。

    class extends React.Component {
      render() {
        const loginForm = createLoginForm([/* ... */]);
    
        return (
          <Flex>
            {loginForm}
          </Flex>
        )
      }
    }

    Molecule の定義の仕方

    tbw