reactjs - 我的无状态组件不呈现(Reactjs 和 Redux)

Question

出于某种原因，我的 allEmployees 无状态组件没有被渲染，我也不知道为什么。我收到以下警告:

未知 Prop employeesData在 <allEmployees>标签。从元素中删除此 Prop 。

容器

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.-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')
);