我的无状态组件未呈现（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

说到警告，看看官方的 React 指南：https : //facebook.github.io/react/warnings/unknown-prop.html

这也可能是由最近的库更新引起的。尝试使用以前的版本。更多信息在这里：https : //stackoverflow.com/a/38177862/4186037

此外，为了呈现React 组件，它们的名称需要以大写字母开头：https : //facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-反应组件

这是一个演示，显示以小写字母 ( article2)开头的组件将不会呈现：http : //codepen.io/PiotrBerececki/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')
);