My Stateless Компонент не рендеринга (Reactjs и Redux)

Question

По какой-то причине мой компонент без членства allEmployees не отображается, и я не могу понять, почему. Я получаю следующее предупреждение:

Неизвестный опорок employeesData на <allEmployees> тег. Снимите эту опору с элемента.

Контейнер

class employeeListPage extends React.Component { 
constructor(props) { 
super(props); 
this.state = { 
    employees : {} 
}; 
} 

render(){ 
    return(
    <div> 
     <allEmployees employeesData = {this.props.employees} /> 
    </div> 
) 
} 

} 
function mapStateToProps(state, ownProps){ 
return{ 
    employees: state.employees 
} 
} 

function mapDispatchToProps(dispatch){ 
return { 
    employeeActions : bindActionCreators(employeeActions, dispatch) 
}; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(employeeListPage); 

allEmployees Компонент

const allEmployees = (props) => (
    <div> 
    <table> 
     <thead> 
     <tr> 
      <th>Employee Number</th> 
      <th>Employee Full Name</th> 
      <th>Active Employee</th> 
      <th>Origin</th> 
      <th>Modify</th> 
      <th>Remove</th> 
     </tr> 
    </thead> 
     <tbody> 
     {props.employeesData.map(employee => { 

       <tr> 
        <td>{employee.Number}</td> 
        <td>{employee.FullName}</td> 
        <td>{employee.IsActive}</td> 
        <td>{employee.Origin}</td> 
        <td><button>Modify</button></td> 
        <td><button>Remove</button></td> 
       </tr> 
     })}; 
     </tbody> 
    </table> 
    </div> 

); 

export default allEmployees; 

Answer 1

Когда дело доходит до предупреждения, взглянуть на официальный Реагировать руководство: https://facebook.github.io/react/warnings/unknown-prop.html

Это также может быть вызванное недавним обновлением библиотеки. Попробуйте использовать предыдущую версию. Более подробную информацию здесь: https://stackoverflow.com/a/38177862/4186037

Кроме того, для того, чтобы оказывать Реагировать компоненты, их имена нужно начинать с прописной буквы: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

Вот демо, показывающий, что компонент, начиная с строчные буквы (article2) не будет оказывать: http://codepen.io/PiotrBerebecki/pen/YGxRqq

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <Article1/> 
     <article2/> 
     </div> 
    ); 
    } 
} 


// this component will render as it starts with a capital letter 
class Article1 extends React.Component { 
    render() { 
    return (
     <div> 
     Article1 
     </div> 
    ); 
    } 
} 


// this component will not render as it starts with a lower case letter 
class article2 extends React.Component { 
    render() { 
    return (
     <div> 
     article2 
     </div> 
    ); 
    } 
}   


ReactDOM.render(
    <App />, 
    document.getElementById('app') 
); 

Answer 2

Я думаю, что вам нужен компонент, чтобы быть паскаль случай, вот jsfiddle

const AllEmployees = (props) => (
    <div> 
    working because pascal case 
    </div> 
); 


ReactDOM.render(
    <AllEmployees />, 
    document.getElementById('container2') 
); 

Вы также можете попробовать это here, попробуйте переименовать FormattedDate в formattedDate.

Answer 3

Когда имя компонента начинается с нижнего регистра, React рассматривает его как HTML-тег. Попробуйте изменить его на AllEmployees, и он должен работать.