Question

当我使用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（{todos}）{ 返回{ 待办事项：待办事项， } }

导出默认连接（clickbutton）（ClickButton）我在UserInfo中使用ClickButton：导入反应来自＆＃39;反应＆＃39; 导入样式来自＆＃39; ./ Userinfo.less＆＃39; 从＆＃39; ../../ components / Button / ClickButton＆＃39;导入ClickButton。从＆＃39; react-redux＆＃39;中导入{connect}; 从＆＃39; antd＆＃39;

导入{Spin}

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

Answer 1

这里有一些实际可行的东西（虽然我删除了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"));

Reactjs教程：无法读取属性＆＃39;道具＆＃39;未定义的

1 个答案: