我有一个React应用程序,其中父组件的道具传递给子组件,然后道具设置子项的状态.
将更新后的值发送到父组件后,子组件不会使用更新的props更新状态.
如何让它更新子组件的状态？
我的精简代码:
class Parent extends React.Component {
constructor (props) {
super(props);
this.state = {name: ''}
}
componentDidMount () {
this.setState({name: this.props.data.name});
}
handleUpdate (updatedName) {
this.setState({name: updatedName});
}
render () {
return <Child name={this.state.name} onUpdate={this.handleUpdate.bind(this)} />
}
}
class Child extends React.Component {
constructor (props) {
super(props);
this.state = {name: ''}
}
componentDidMount () {
this.setState({name: this.props.name});
}
handleChange (e) {
this.setState({[e.target.name]: e.target.value});
}
handleUpdate () {
// ajax call that updates database with updated name and then …我正在研究一个React应用程序,并希望我正在处理的组件能够访问组件正在接收的props对象中的键名.
例如,我有这个对象:
var fido = {
animal: "dog",
legs: 4,
licksSelf: true
}
然后我通过props对象将此对象传递给我的React组件:
<Pet characteristics={fido} />
然后在我的Pet的React组件中,我想要访问键和值,我该怎么做？例如,在以下错误代码中:
class Pet extends React.Component {
render () {
var petList = this.props.characteristics.map((char) => {
return (
<div>{char.key} : {char.value}</div> // <-- what should this code look like?
);
};
return (
<div>{petList}</div>
);
};
};
有谁知道我如何访问props对象上的键值对中的键名？谢谢!
我有一个React应用程序，该应用程序通过API从单独的数据库中提取数据。
在本地运行时，该应用程序是一个端口，而API在另一个端口上。
由于当我在应用程序中对API进行AJAX调用时，我需要包含API可以连接的URL。
如果我对单独的端口进行硬编码（例如，该应用程序位于http：// localhost：3000上，而API则位于http：// localhost：3100上），则可以使用AJAX url调用API http：// localhost：3100 / api / trusts）。
但是，由于应用程序和API位于不同的端口上，因此我无法将AJAX网址设为相对路径，因为它错误地将AJAX调用发送到了http：// localhost：3000 / api / trusts而不是http：// localhost： 3100 / api / trusts。
如何使它们在同一端口上运行？
谢谢！
这是我的server.js：
var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var path = require('path');
var app = express();
var router = express.Router();
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
//set our port to either a predetermined port number if you …我试图用父组件收到的新道具更新组件的状态.
但是,setState调用似乎没有像我期望的那样工作.
我理解componentWillReceiveProps不会重新渲染组件,但它似乎甚至不允许setState调用.
我有什么想法可能做错了吗？
代码:
componentWillReceiveProps (nextProps) {
this.setState({name: nextProps.site.name});
console.log(nextProps.site.name); // logs the updated name
console.log(this.state.name); // logs the old name, even after presumably being set again
}
我正在尝试在我的 React 应用程序中使用 Rellax，一个 JS 视差库。
我已经通过 npm 下载了 Relax 并将 Relax 导入到 React 组件中。然后，Rellax 的文档要求为新的 Rellax 构造函数分配一个 rellax 变量，该构造函数将查询选择器作为参数。
像这样：
var rellax = new Rellax('.rellax');
但是，当我调用该组件时，收到此错误：
Error: The elements you're trying to select don't exist.
但是，我确实在组件本身中使用了这个类。
下面是完整的组件：
import React from 'react';
import Rellax from 'rellax';
import 'sample.css';
var rellax = new Rellax('.rellax');
const SampleComponent = () => {
return (<div>
<div className="rellax square"></div>
<div className="rellax rectangle"></div>
</div>);
}
export default SampleComponent;
有谁知道为什么这不起作用？
以下是 Rellax 文档的链接：https : //github.com/dixonandmoe/rellax
谢谢！