首页 文章

Reactjs教程:无法读取未定义的属性'props'

提问于
浏览
0

我在使用Reactjs时遇到问题,我是Reactjs的新手,所以也许这个问题我想在UserInfo中使用类ClickButton,但我不知道如何通过道具更改名称

import React, { PropTypes } from 'react';
import { Button } from 'antd';
import { connect } from 'react-redux';
import styles from './ClickButton.less';

const ClickButton = ({ todos,dispatch }) => {

  const userinforclick = () => {
  dispatch({
      type: 'todos/clickbutton',
      payload: !todos['click_button'],
  });
};

return (
  <span>
      < span type="primary" className={ styles.show }  onClick={     userinforclick.bind(this) } > {this.props.name} < /span >  
  </span>
);

};

function clickbutton(){return {todos:todos,}}

导出默认连接(clickbutton)(ClickButton),我在UserInfo中使用ClickButton:从'./Userinfo.less'导入来自'react'导入样式的React从'../../components/Button/ClickButton'导入导入ClickButton来自'react-redux'的;从'antd'导入

const Userinfo = ({ todos,dispatch }) => {
const { userinfo, userinfoloading, click_button } = todos;

if(userinfoloading) {
  return <Spin />;
}
const renderList = () => {
    return(
        <div className={ styles.userInfodiv}>
            <div>
                <span className={ styles.userInfoTitle }>userinfo</span>
            </div>
            <div className = { styles.slice }></div>
            <div className = { styles.userInfoBody}>
                <div className = { styles.userInfoSubBody }>
                    <span>username:</span>
                    <span>{userinfo[0]['username']}</span>
                </div>
                <div  className = { styles.userInfoSubBody }>
                    <span>number:</span>
                    { click_button ? <span>{userinfo[0]['phone']}</span>  : <input type="text" value={userinfo[0]['phone']} /> }

                    <ClickButton name="john" />
                </div>
            </div>

        </div>
    );
};
return (
    <div>
        { renderList() }
    </div>
);
};

function mapStateToProps({ todos }) {
  return {
    todos: todos,
  };
}

export default connect(mapStateToProps)(Userinfo);

1 回答

  • 0

    这是实际有用的东西(虽然我删除了todos等,但你可以轻松添加它们):

    class RenderList extends React.Component {
      render() {
        return (<span> {this.props.name} </span>);
      }
    }
    
    class App extends React.Component {
      render() {
        return (<div>
          <RenderList name="John"/>
        </div>)
      }
    }
    
    ReactDOM.render(<App/>,document.getElementById("app"));
    

相关问题