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 Component

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

Answer 2

我认为你需要你的组件是pascal case，这里是jsfiddle

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


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

您也可以尝试here，尝试将FormattedDate重命名为formattedDate。

Answer 3

当组件名称以小写字母开头时，React会将其视为HTML标记。尝试将其更改为AllEmployees，它应该可以正常工作。

我的无状态组件无法渲染（Reactjs和Redux）

3 个答案: