javascript - 允许 Material UI RaisingButton 标签中存在变量

Question

我正在使用 React 和 Material，我想知道如何在 Material UI 组件标签中传递变量？

这是我的代码:

const LoginForm = ({
    myVariable
}) => (
    {/*....*/}
    <RaisedButton type="submit" label={myVariable} primary/>
    {/*....*/}
);

LoginForm.propTypes = {
    myVariable : PropTypes.string.isRequired
};

export default LoginForm;

但是，即使标签在浏览器(chromium)中正确显示，控制台也会向我显示此警告:

warning.js:36 Warning: Failed prop type: Required prop label or children or icon was not specified in RaisedButton.

编辑:经过一些调试， View 被渲染了几次(至少4次？？？)，并且在第一次渲染中，myVariable未定义。

所以，现在，我必须管理为什么组件被渲染多次以及为什么在第一次渲染中变量未定义。

这是我的代码。

Base.jsx

import React, {PropTypes} from 'react';
import {Link, IndexLink} from 'react-router';

const Base = ({
  children
}) => (
  <div>
    <div className="top-bar">
    {children}
  </div>
);

Base.propTypes = {
  children: PropTypes.object.isRequired
};

export default Base;

Auth.js

class Auth {

  /**
   * Authenticate a user. Save a token string in Local Storage
   *
   * @param {string} token
   */
  static authenticateUser(token) {
    localStorage.setItem('token', token);
  }

  /**
   * Check if a user is authenticated - check if a token is saved in Local Storage
   *
   * @returns {boolean}
   */
  static isUserAuthenticated() {
    return localStorage.getItem('token') !== null;
  }

  /**
   * Deauthenticate a user. Remove a token from Local Storage.
   *
   */
  static deauthenticateUser() {
    localStorage.removeItem('token');
  }

  /**
   * Get a token value.
   *
   * @returns {string}
   */

  static getToken() {
    return localStorage.getItem('token');
  }
}

export default Auth;

loginForm.jsx

import React, {PropTypes} from 'react';
import {Link} from 'react-router';
import {Card, CardText} from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';

const LoginForm = ({
  locales,
  onSubmit,
  onChange,
  errors,
  successMessage,
  user
}) => (
  <Card className="container">
    <form action="/" onSubmit={onSubmit}>
      <h2 className="card-heading">{locales.connect_to_your_account}</h2>

      {successMessage && <p className="success-message">{successMessage}</p>}
      {errors.summary && <p className="error-message">{errors.summary}</p>}

      <div className="field-line">
        <TextField
          floatingLabelText={locales.email}
          name="email"
          errorText={errors.email}
          onChange={onChange}
          value={user.email}
        />
      </div>

      <div className="field-line">
        <TextField
          floatingLabelText={locales.password}
          type="password"
          name="password"
          onChange={onChange}
          errorText={errors.password}
          value={user.password}
        />
      </div>

      <div className="button-line">
        <RaisedButton type="submit" label={locales.log_in} primary/>
      </div>

      <CardText>{locales.dont_have_account_yet} <Link to={'/request-account'}>{locales.request_one}</Link>.</CardText>
    </form>
  </Card>
);

LoginForm.propTypes = {
  locales       : PropTypes.object.isRequired,
  onSubmit      : PropTypes.func.isRequired,
  onChange      : PropTypes.func.isRequired,
  errors        : PropTypes.object.isRequired,
  successMessage: PropTypes.string.isRequired,
  user          : PropTypes.object.isRequired
};

export default LoginForm;

登录页面.jsx

import React, {PropTypes} from 'react';
import Auth from '../modules/Auth';
import LoginForm from '../components/LoginForm.jsx';

class LoginPage extends React.Component {

  /**
   * Class constructor.
   */
  constructor(props, context) {
    super(props, context);

    const storedMessage = localStorage.getItem('successMessage');
    let successMessage  = '';

    if (storedMessage) {
      successMessage = storedMessage;
      localStorage.removeItem('successMessage');
    }

    // set the initial component state
    this.state = {
      locales: {},
      errors : {},
      successMessage,
      user   : {
        email   : '',
        password: '',
      },
    };

    this.processForm = this.processForm.bind(this);
    this.changeUser  = this.changeUser.bind(this);
  }

  // Load translations via an Api Rest
  componentDidMount() {
    const data = {
      connect_to_your_account: {},
      log_in                 : {},
      email                  : {},
      password               : {},
      dont_have_account_yet  : {},
      request_one            : {},
    };
    const xhr  = new XMLHttpRequest();
    xhr.open('post', '/app_test.php/api/fr/translations');
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

    xhr.responseType = 'json';
    xhr.addEventListener('load', () => {
      if (xhr.status === 200) {
        this.setState({
          locales: xhr.response,
        });
      }
    });
    xhr.send(JSON.stringify(data));
  }

  /**
   * Process the form.
   *
   * @param {object} event - the JavaScript event object
   */
  processForm(event) {
    // prevent default action. in this case, action is the form submission event
    event.preventDefault();

    // create a base64 encoded string
    const credentials = window.btoa(`${this.state.user.email}:${this.state.user.password}`);

    // create an AJAX request
    const xhr           = new XMLHttpRequest();
    xhr.withCredentials = true;
    xhr.open('post', '/app_test.php/api/fr/tokens');
    xhr.setRequestHeader('authorization', `Basic ${credentials}`);

    xhr.responseType = 'json';
    xhr.addEventListener('load', () => {
      if (xhr.status === 201) {
        // success

        // change the component-container state
        this.setState({
          errors: {}
        });

        // save the token
        Auth.authenticateUser(xhr.response.token);

        // change the current URL to /
        this.context.router.replace('/');
      } else {
        // failure

        // change the component state
        const errors   = xhr.response.errors ? xhr.response.errors : {};
        errors.summary = xhr.response.message;

        this.setState({
          errors
        });
      }
    });
    xhr.send(null);
  }

  /**
   * Change the user object.
   *
   * @param {object} event - the JavaScript event object
   */
  changeUser(event) {
    const field = event.target.name;
    const user  = this.state.user;
    user[field] = event.target.value;

    this.setState({
      user
    });
  }

  /**
   * Render the component.
   */
  render() {
    return (
      <LoginForm
        locales={this.state.locales}
        onSubmit={this.processForm}
        onChange={this.changeUser}
        errors={this.state.errors}
        successMessage={this.state.successMessage}
        user={this.state.user}
      />
    );
  }

}

LoginPage.contextTypes = {
  router: PropTypes.object.isRequired
};

export default LoginPage;

routes.js

import Basepage from './containers/BasePage.jsx';
import LoginPage from './containers/LoginPage.jsx';
import Auth from './modules/Auth';

const routes = {
  // base component (wrapper for the whole application).
  component  : Basepage,
  childRoutes: [

    {
      path        : '/',
      getComponent: (location, callback) => {
        if (Auth.isUserAuthenticated()) {
          callback(null, DashboardPage);
        } else {
          callback(null, LoginPage);
        }
      }
    },

    {
      path     : '/login',
      component: LoginPage
    },

    {
      path   : '/logout',
      onEnter: (nextState, replace) => {
        Auth.deauthenticateUser();

        // change the current URL to /
        replace('/');
      }
    }

  ]
};

export default routes;

index.js(访问点)

import React from 'react';
import ReactDom from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {browserHistory, Router} from 'react-router';
import routes from './routes.js';

import '../styles/main.scss';

// remove tap delay, essential for MaterialUI to work properly
injectTapEventPlugin();

ReactDom.render((
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Router history={browserHistory} routes={routes}/>
  </MuiThemeProvider>), document.getElementById('app')
);

我尝试发送到 View 的变量是通过 Api Rest 检索的翻译文本(翻译由后端管理)

感谢您的帮助。

Answer 1

我终于找到了一个解决方法，不知道这是否是最佳实践:

label={`${myVariable}`}