Reactコンポーネントに変数を渡すと "unknown property errror"が返される

Question

スーパーシンプルなので、私は思った！文字列を別のコンポーネントに渡そうとするだけですが、文字列補間を使用しているためプロパティを認識しません。

編集

は、私はそれが入力セレクタを変更Reduxのフォームのアップグレードに関連している可能性が考えています。私は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); 

子コンポーネント：ES6のdestructurを使用してプロパティを渡す変数

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

を使用せずにプロパティを渡す

1. ：

   import React from 'react'; 
   
   require('./styles.scss'); 
   
   const errorListItem = ({ message }) => { 
       return (<li>{message}</li>) 
   } 
   
   export default errorListItem; 
   

   試みソリューション

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

2. `'を付けずに古いJS構文を使用してプロパティを渡す。

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

3. 子コンポーネントを何かレンダリングするようにしてください！

   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と呼ばれる「普通の」タグを描こうとしていると思っています。https://facebook.github.io/react/warnings/unknown-prop.html

あなたがそれをインポートするときに、あなたのステートレスなコンポーネントの名前を変更する（そしてあなたがそれを定義するときにも一貫している）、このようにしてみてください：エラー現れるが原因リアクトは、HTMLタグに渡された小道具が検証

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