如何使用reactjs资料UI更新具有用户首字母缩写的组件之间的配置文件图片？

Question

我是新来的。我有一个主页在我的盖茨比应用程序与AppBar(材料用户界面反应)。我最初想显示用户名和姓首字母。当我使用msal-react来启用微软的单点登录时，我从msal获得了intials，并在homePage中用homePage更新了用户化身。我有一个个人资料页，在那里我可以上传一个新的图片和细节。它会在配置文件页面上预览。但我想更新阿凡达，这是在主页也。

<Avatar {...stringAvatar(name)} />
function stringAvatar(name) {
   if(name !== null){
      const fullName = name.split(" ")[0] + " " + name.split(" ")[1];
      return {
         sx: {
             bgcolor: stringToColor(name),
         },
         children: `${fullName.split(' ')[0][0]}${fullName.split(' ')[1][0]}`,
      };
   }
   else{
       console.log("name is null");
   }

}

​

​

这是我的主页在个人资料页，最初我已经把阿凡达像在HomePage。我可以上传配置文件的图片，名称和名称在配置文件和它得到反映在同一页。但是我不知道如何在Navbar主页上预览

​

​

​

​

​

配置文件页中的代码

const ImgUpload = ({
onChange,
src
}) =>
<label htmlFor="photo-upload" className="custom-file-upload fas">
    <div className="img-wrap img-upload" >
        {src == 'https://github.com/OlgaKoplik/CodePen/blob/master/profile.jpg?raw=true' 
? <Avatar {...stringAvatar('Lakshmi Subramanian')} alt="LS" className="avatarCard" />
            : <img for="photo-upload" src={src} />}
    </div>
    <input id="photo-upload" type="file" onChange={onChange} />
</label>

export class CardProfile extends React.Component{


state = {
    file: '',
    imagePreviewUrl: 'https://github.com/OlgaKoplik/CodePen/blob/master/profile.jpg?raw=true',
    name: '',
    status: '',
    active: 'edit'
}

photoUpload = e => {
    e.preventDefault();
    const reader = new FileReader();
    const as = new AvatarSource();
    const file = e.target.files[0];
    as.setSrc(e.target.files[0].name);
    console.log(as.getSrc());      
    reader.onloadend = () => {
        this.setState({
            file: file,
            imagePreviewUrl: reader.result
        });
        as.setSrc(this.state.imagePreviewUrl);
        console.log("Inside Onloaded : " + as.getSrc());


    }
    reader.readAsDataURL(file);

}
editName = e => {
    const name = e.target.value;
    this.setState({
        name,
    });
}

editStatus = e => {
    const status = e.target.value;
    this.setState({
        status,
    });
}

handleSubmit = e => {
    e.preventDefault();
    let activeP = this.state.active === 'edit' ? 'profile' : 'edit';
    this.setState({
        active: activeP,
    })
}

render() {
    const { imagePreviewUrl,
        name,
        status,
        active } = this.state;
    return (
        <div>
            {(active === 'edit') ? (
                <Edit onSubmit={this.handleSubmit}>
                    <ImgUpload onChange={this.photoUpload} src={imagePreviewUrl} />
                    <Name onChange={this.editName} value={name} />
                    <Status onChange={this.editStatus} value={status} />
                </Edit>
            ) : (
                <Profile
                    onSubmit={this.handleSubmit}
                    src={imagePreviewUrl}
                    name={name}
                    status={status} />)
            }
        </div>
    )
}
}

任何帮助更新配置文件图片后，通过组件将高度赞赏！！提亚

Answer 1

你的状态必须是一个全局状态，这是你的情况：

state = {
    file: '',
    imagePreviewUrl: 'https://github.com/OlgaKoplik/CodePen/blob/master/profile.jpg?raw=true',
    name: '',
    status: '',
    active: 'edit'
}

你有不同的选择:背景，后坐力，剩余。但作为初学者，建议上下文作为开始，因为它的正式反应团队全球状态威胁系统。