將變量傳遞給React組件給出「未知屬性錯誤」

Question

超級簡單或者我認爲！試圖將一個字符串傳遞給另一個組件，但它不能識別該屬性，因爲它使用了字符串插值。

編輯

我相信這可能與升級終極版，形式變化的輸入選擇。我正在使用React 15.3.1，我相信他們改變了影響Redux的輸入工作方式。 （https://github.com/erikras/redux-form/issues/1249）。

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../../actions'; 
import { reduxForm } from 'redux-form'; 

import errorListItem from '../error-list-item/index.js'; 

class Signup extends Component { 
    handleFormSubmit(formProps) { 
    this.props.signupUser(formProps); 
    } 

    renderAlert() { 
    const errorObject = this.props.errorMessage; 

    // single (connection/api) error 
    if (errorObject === 'Network Error') { 
     return (
     <div className="alert alert-danger"> 
      <errorListItem message="hello" /> 
     </div> 
    ); 

    // error object from BE 
    } else if (errorObject && typeof errorObject === 'object') { 
     const keys = Object.keys(errorObject); 

     debugger; 
     if (keys.length === 0) return; 

     return Object.keys(errorObject).map(field => { 
     return errorObject[field].map(problem => { 
      const message = `${field} ${field}`; 

      return (
      <ul className="error-message-list"> 
       <errorListItem message={message} /> 
      </ul> 
      ); 
     }); 
     }); 
    } 
    } 

    render() { 
    const { handleSubmit, fields: { email, password, passwordConfirm, username }} = this.props; 

    return (
     <div className="signup"> 
     <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
      <fieldset className="form-group"> 
      <label>Username:</label> 
      <input className="form-control" {...username} /> 
      {username.touched && username.error && <div className="error">{username.error}</div>} 
      </fieldset> 
      <fieldset className="form-group"> 
      <label>Email:</label> 
      <input className="form-control" {...email} /> 
      {email.touched && email.error && <div className="error">{email.error}</div>} 
      </fieldset> 
      <fieldset className="form-group"> 
      <label>Password:</label> 
      <input type="password" className="form-control" {...password} /> 
      {password.touched && password.error && <div className="error">{password.error}</div>} 
      </fieldset> 
      <fieldset className="form-group"> 
      <label>Confirm Password:</label> 
      <input className="form-control" {...passwordConfirm} /> 
      {passwordConfirm.touched && passwordConfirm.error && <div className="error">{passwordConfirm.error}</div>} 
      </fieldset> 
      <button action="submit" className="btn btn-primary">Sign up</button> 
     </form> 
     {this.renderAlert()} 
     </div> 
    ); 
    } 
} 

function validate(formProps) { 
    const errors = {}; 

    if (!formProps.email) { 
    errors.email = 'Please enter an email'; 
    } 

    if (!formProps.password) { 
    errors.password = 'Please enter a password'; 
    } 

    if (!formProps.passwordConfirm) { 
    errors.passwordConfirm = 'Please enter a password confirmation'; 
    } 

    if (!formProps.username) { 
    errors.username = 'Please enter a username'; 
    } 

    // Passwords match 
    if (formProps.password !== formProps.passwordConfirm) { 
    errors.password = 'Passwords must match'; 
    } 

    return errors; 
} 

function mapStateToProps(state) { 
    return { errorMessage: state.auth.errors }; 
} 

export default reduxForm({ 
    form: 'signup', 
    fields: ['email', 'password', 'passwordConfirm', 'username'], 
    validate 
}, mapStateToProps, actions)(Signup); 

兒童組件：

import React from 'react'; 

require('./styles.scss'); 

const errorListItem = ({ message }) => { 
    return (<li>{message}</li>) 
} 

export default errorListItem; 

嘗試的解決方案：

1. 跑過屬性，而無需使用可變

   <ul className="error-message-list"> 
       <errorListItem message={`${field} ${problem}`} /> 
   </ul> 
   

2. 傳遞使用ES6 destructur屬性ing

   <ul className="error-message-list"> 
       <errorListItem message /> 
   </ul> 
   

3. 使用舊的JS語法傳遞屬性而不用``。

   const message = "" + field + " " + problem + ""; 
   
       return (
       <ul className="error-message-list"> 
        <errorListItem message={message} /> 
       </ul> 
       ); 
   

4. 試着讓子組件呈現任何東西！

   const errorListItem = ({ message }) => { 
       return <li>Help Me, Obi-Wan Kenobi. You're My Only Hope</li> 
       } 
   

文檔查閱：

https://facebook.github.io/react/warnings/unknown-prop.html

錯誤消息：

Warning: Unknown prop `message` on <errorListItem> tag. Remove this prop from the element. 

預期行爲：

1. 它應該能夠傳遞一個字符串作爲屬性。如果我使用下面，它會工作：

   <ul className="error-message-list"> 
       <errorListItem message='message' /> 
   </ul> 
   

2. 如果不呈現，該錯誤信息不應該是「不明財產」，但給定的，而不是無效的屬性值。

版本：

"react": "^0.14.3", 
"react-redux": "^4.0.0", 
"react-router": "^2.0.1", 
"redux": "^3.0.4", 
"redux-form": "^5.3.1", 

Answer 1

我相信問題是你如何命名您的errorListItem組件。在JSX中，自定義組件名稱應該以大寫字母開頭，而正常的html以小寫字母開頭。所以React認爲你試圖渲染一個名爲errorListItem的「普通」標籤，其屬性不明。該錯誤顯示，因爲陣營驗證傳遞給HTML標籤的道具：https://facebook.github.io/react/warnings/unknown-prop.html

嘗試導入時將其重命名你的無狀態組件（和一致還當你定義它）以這樣的方式

import ErrorListItem from '../error-list-item/index.js'; 
// Rest of your code... 
<ErrorListItem message={message} />