Composants de conception de composants et d'entrée de réaction

Question

MDC travaille donc en collaboration avec React et en utilisant les docs Google, j'ai travaillé sur la façon dont j'ai besoin d'exécuter les JS suivants lorsqu'un utilisateur clique sur un champ de saisie - basiclly l'étiquette Cependant, avec reactjs j'ai remarqué que je ne peux pas mettre le code ci-dessous dans la zone de rendu, donc je me demande où je le placerais et comment?

(function() { 
     var tfs = document.querySelectorAll(
      '.mdc-textfield:not([data-demo-no-auto-js])' 
     ); 
     for (var i = 0, tf; tf = tfs[i]; i++) { 
      mdc.textfield.MDCTextfield.attachTo(tf); 
     } 
     })(); 

plein code reactjs mis à jour

import React, { Component } from 'react'; 
import './App.css'; 
import * as mdc from 'material-components-web'; 

class App extends Component { 
    hrefjs(l){ 
      var script = document.createElement("script"); 
      script.type = "text/javascript"; 
      script.src = l; // use this for linked script 
      document.body.appendChild(script); 
    } 


    componentWillMount() { 
      this.hrefjs("//unpkg.com/material-components-web@latest/dist/material-components-web.min.js"); 
      var texst ="(function(){var tfs = document.querySelectorAll('.mdc-textfield:not([data-demo-no-auto-js])'); for (var i = 0, tf; tf = tfs[i]; i++) {mdc.textfield.MDCTextfield.attachTo(tf); mdc.autoInit();}})();" 
      const script = document.createElement("script"); 
      script.text=texst; 
      document.body.appendChild(script); 
    }; 
    render() { 
    return (
     <div className="App"> 
     <header className="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall"> 
      <div className="mdc-toolbar__row"> 
      <section className="mdc-toolbar__section mdc-toolbar__section--align-start"> 
       <span className="mdc-toolbar__title">Title</span> 
      </section> 
      </div> 
     </header> 
     <main className="demo-main mdc-toolbar-fixed-adjust"> 

      <div className="mdc-form-field"> 
       <div className="mdc-checkbox"> 
       <input type="checkbox" 
         id="my-checkbox" 
         className="mdc-checkbox__native-control"/> 
       <div className="mdc-checkbox__background"> 
        <svg className="mdc-checkbox__checkmark" 
         viewBox="0 0 24 24"> 
        <path className="mdc-checkbox__checkmark__path" 
          fill="none" 
          stroke="white" 
          d="M1.73,12.91 8.1,19.28 22.79,4.59"/> 
        </svg> 
        <div className="mdc-checkbox__mixedmark"></div> 
       </div> 
       </div> 
       <label htmlhtmlhtmlFor="my-checkbox" id="my-checkbox-label">This is my checkbox</label> 
      </div> 
      <section className="example"> 
       <div className="mdc-textfield"> 
         <input type="text" id="username" className="mdc-textfield__input" aria-controls="username-helptext"/> 
         <label htmlFor="username" className="mdc-textfield__label">Username</label> 
        </div> 
        <p id="username-helptext" className="mdc-textfield-helptext" aria-hidden="true"> 
         This will be displayed on your public profile 
        </p> 
       </section> 
     </main> 
     <script> 
     mdc.toolbar.MDCToolbar.attachTo(document.querySelector('.mdc-toolbar')); 
     //mdc.textfield.MDCToolbar.attachTo(document.querySelector('.mdc-textfield')); 
     //mdc.autoInit(); 
     </script> 

     </div> 
    ); 
    } 
} 

export default App; 

Dernière mise à jour J'ai ajouté ces deux fonctions mais pour une raison quelconque (function() {})(); script pendant qu'il fera une alerte, etc., il ne permettra pas à l'étiquette de texte à déplacer comme la démo codepen.io

hrefjs(l){ 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = l; // use this for linked script 
     document.body.appendChild(script); 
} 


componentWillMount() { 
     this.hrefjs("//unpkg.com/material-components-web@latest/dist/material-components-web.min.js"); 
     var texst ="(function(){var tfs = document.querySelectorAll('.mdc-textfield:not([data-demo-no-auto-js])'); for (var i = 0, tf; tf = tfs[i]; i++) {mdc.textfield.MDCTextfield.attachTo(tf); mdc.autoInit();}})();" 
     const script = document.createElement("script"); 
     script.text=texst; 
     document.body.appendChild(script); 
}; 

Answer 1

Même si votre approche fonctionne à la fin d'une certaine manière. Cela ne ressemble vraiment pas à un moyen très agréable de continuer à développer et votre code sera un cauchemar que les autres pourront lire plus tard (ou vous-même). Cela peut être fait beaucoup plus facilement. J'écris habituellement des wrappers de react.js pour les composants dont j'ai besoin de MDC. Voici un exemple pour le champ de texte:

import React from 'react'; 
import { MDCRipple } from '@material/ripple/dist/mdc.ripple'; 

class MdcButton extends React.Component { 
    constructor(props) { 
     super(props); 
     // Init state 
     this.state = {} 
    } 

    componentDidMount() { 
     if (this.props.ripple) 
      MDCRipple.attachTo(this.refs.button); 
    } 

    static defaultProps = { 
     ripple: true, 
     raised: true, 
     disabled: false, 
     className: "", 
     type: "submit" 
    } 

    render() { 
     let className = "mdc-button " + this.props.className; 
     if (this.props.raised) 
      className += " mdc-button--raised"; 

     return (
      <button 
       ref="button" 
       id={this.props.id} 
       className={className} 
       type={this.props.type} 
       onClick={this.props.onClick} 
       disabled={this.props.disabled} 
      > 
       {this.props.children} 
      </button> 
     ); 
    } 
} 

export default MdcButton 

Vous pouvez consulter la démo officielle mdc pour react.js ici (https://github.com/material-components/material-components-web/tree/master/framework-examples/react). Pour le style, j'inclus les fichiers mcc sccs dans mes fichiers scss et modifiez les valeurs dont j'ai besoin. par exemple:

$mdc-theme-primary: #404040; 
$mdc-theme-accent: #a349a3; 
$mdc-theme-background: #fff; 

@import "@material/ripple/mdc-ripple"; 
@import "@material/typography/mdc-typography"; 
@import "@material/theme/mdc-theme"; 
@import "@material/button/mdc-button";