javascript - 如何将类组件中的道具发送到功能组件?
问题描述
我是 reactjs 的初学者。需要知道如何将一个页面中的道具值发送到另一个页面。道具在第一页我可以获取类组件值如何获取另一个页面中的值。提前致谢
墙色.jsx
import React, { Component } from "react";
import { SketchPicker } from 'react-color';
import WallFactory from "../../wall-factory-3d";
export default class WallColor extends Component {
constructor(props) {
super(props);
this.state = {
background: '#d3d3d3',
};
}
handleChangeComplete(e){
this.setState({ background: e.hex },()=>{
return <WallFactory background={this.state.background}/>
});
};
render() {
return (
<SketchPicker color={ this.state.background } onChangeComplete={(e)=>this.handleChangeComplete(e)} />
);
}
}
另一个页面是 wall-factory-3d.js
import { handleChangeComplete } from "../../components/toolbar/wallcolor";
import * as SharedStyle from '../../shared-style';
function get_color(props){
console.log(props.background);
}
我试过这个但没有得到输出。
解决方案
意见,但这是我会做到的...... :)
this.state = {
background: 'color',
pickedWall: false,
}
const handleChangeComplete = (e) => {
this.setState(prevState => ({
...prevState,
pickedWall: true,
background: e.target.value,
}))
}
render() {
const { x, y } = this.props
const { background, pickedWall } = this.state
const { handleChangeComplete } = this
return <SketchPicker {...{ x, y, background, handleChangeComplete, pickedWall }} />
}
在你的组件中......
const SketchPicker = ({
x,
y,
background,
pickedWall,
handleChangeComplete,
}) => {
return (
<div>
<SomeDiv onClick={(e) => handleChangeComplete(e)}>
...your code
</SomeDiv>
<Fragment>
{pickedWall && <WallPicker {...{ x, y, background }} />}
</Fragment>
</div>
)
}
推荐阅读
- c# - 实例化一个新的 MySqlConnection 对象 VS 将实例化的 MySqlConnection 对象传入 C# 中的“使用”语句有什么区别?
- javascript - Node.js 应用程序中的默认范围是什么?
- node.js - 拦截 knex.js 查询预执行
- html - 将数据从一个视图传递到另一个 django
- reactjs - 如何在功能组件中正确存储 refs
- python - 以可调整的比例拆分列表
- java - 即使我们目前不打算迁移到 Java 8+,我们是否可以升级到 Spring 5?
- powershell - 使用 Vbscript/PowerShell 如何检查 AD 用户帐户是否有权修改 AD 组成员资格?
- angular - 错误类型错误:o.map 不是 angular 4 prod build 上的函数
- excel - Excel 文件损坏