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; 
   

   시도 솔루션 ing

   <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} />