个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在学习 React。我在 vanilla JS 中有一个小函数，它随机生成一个给定的图像。由于它是随机的，并且没有(有意)保存到任何状态，因此每个状态更改也会更改图像，这是我试图避免的。该图像将用作 <body> 上的内联样式, 所以它可以用作我的背景图像。
如果我设置这个 myBackground在 componentWillMount 上运行，它只在组件安装之前呈现一次，然后我可以完成我需要的，但我不知道那里应该有什么。
class homePage extends React.Component {
constructor () {
super()
this.state = {}
}
get myBackground () {
const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg']
const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)]
const bgImg = {backgroundImage: 'url(' + randomImg + ')'}
return bgImg
}
componentWillMount () {
this.myBackground // doesn't work
}
render () {
// with the current status, below image is changed
// whenever a given state is changed. It needs to be changed
// only right before component is mounted
return <body style={this.myBackground}>
...
}
}
我怎样才能拥有this.myBackground附加到 componentWillMount 并且能够在渲染中使用它？请注意，创建一个 setState预计不会处理此行为。
最佳答案
您在 render 中使用 this.myBackground，这是一个 getter 函数。每次你的组件重新渲染时，它都会再次调用 getter 函数并给你另一个图像。
只需将您的 getter 函数名称更改为其他名称并将其存储到您的实例属性或 componentWillMount 中的 state。
class homePage extends React.Component {
// Rename your getter function!
get getNewBackground() {
const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg']
const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)]
const bgImg = {backgroundImage: 'url(' + randomImg + ')'}
return bgImg
}
componentWillMount() {
this.myBackground = this.getNewBackground;
}
render() {
return <body style={this.myBackground}>
}
}
严肃地说，你不应该像那样使用 getter 函数，你的组件应该如下所示:
class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = {
backgroundImage: this.getNewBackground(),
};
}
getNewBackground() {
const imageArr = ['cat.jpg', 'dog.jpg', 'horse.jpg'];
const randomImg = imageArr[Math.floor(Math.random() * imageArr.length)];
const bgImg = {backgroundImage: 'url(' + randomImg + ')'};
return bgImg;
}
render() {
return <body style={this.state.myBackground}>
}
}
关于javascript - 将用作内联样式的函数附加到 componentWillMount，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39502382/
25
4
0
在我的代码中，我没有任何显式使用 componentWillMount，但在运行 webpack 时我仍然看到一些警告. react-dom.development.js:12386 Warning:
据我所知，componentWillMount 唯一可以做而 constructor 不能做的就是调用 setState。 componentWillMount() { setState({
我正在react组件的componentWillMount函数中发出ajax请求。我有一个状态变量。我将此变量的状态设置为 ajax 调用的响应。 this.setState({state_varia
在 ReactJs 中，我们可以使用 componentWillMount 做哪些不能通过构造函数做的事情？两者都在组件渲染之前调用一次。 import React from 'react'; cla
我在reactjs 中的状态方面面临一些困难。据我所知，componentWillMount 是在渲染组件之前使用 ajax 调用加载数据的地方。我有一个简单的项目，它用加载的数据填充面板堆栈并将其显
我正在创建一个内部布局。我是从另一个场景看到这个场景的。所以一开始就渲染了另一个布局。当我进入第二个场景(带有 TextInput 标签)后，我收到警告，例如: componentWillMount
触发服务器调用以在 componentWillMount 生命周期方法中获取数据是一个不好的做法吗？ 以及为什么最好使用 componentDidMount。 最佳答案 更新: componentWi
首先，我是 React 新手，这是我的第一个项目。 我正在创建一个基本的博客应用程序，我的应用程序类如下所示: var App = React.createClass({ getInitial
我正在学习 React。我在 vanilla JS 中有一个小函数，它随机生成一个给定的图像。由于它是随机的，并且没有(有意)保存到任何状态，因此每个状态更改也会更改图像，这是我试图避免的。该图像将用
如果已经登录，我正在努力重定向到主页。我正在使用 ping 获取登录信息，如果成功，我将设置一个状态，该状态将在渲染和重定向中进行检查。但几秒钟后它会显示登录页面，然后重定向到主页。我做错了什么？ e
对于react-native，我想使用componentWillMount而不使用类 await Font.loadAsync({ gotham_medium: require("../.
正如官方文档所说， componentWillMount 现已弃用，建议放置用于此生命周期方法的任何代码都放入构造函数中。 老实说我不知道该怎么做。我已经得到了用于 componentWillMo
我在安装组件之前调用 API，但我的代码调用 API 两次。我的要求是在成功调用 API 后显示年份数据(它将返回年份数据)。如果我在 componentWillMount 中使用 setState
我的 componentWillMount() 每次切换路由时都会被调用。 有没有其他方法可以处理商店状态的变化？ 当我第一次使用这两个功能时没问题，但是当我切换路线并返回并尝试再次使用它们时，我收到
我正在使用 React.js，如您所知，componentWillMount() 将被弃用。我想替换我的 componentWillMount。 我要把它的逻辑移到constructor中。在 com
一个类用于拦截 axios 错误。为了绑定(bind)箭头函数，正在使用 componentDidMount()。现在我需要从服务器初始化数据，所以我必须使用 componentWillMount()
我有一个关于何时 componentDidMount 以及何时触发的问题，我是使用 React 的新手，并且文档的示例很模糊。为什么我的组件没有触发？ var App = React.createCl
从昨天开始(我认为)我开始收到来自 React 的警告: Warning: componentWillMount has been renamed, and is not recommended fo
我收到四个无法在控制台中最小化的重大警告。这些警告来 self 的理解，不是因为我做错了什么，而是因为react-router-dom和react-select使用了已弃用的componentWill
如果我有一个需要一些设置的 React 组件(例如计时器或 WebAudio API 等)，我很难决定初始化应该在 constructor 中进行还是在 componentWillMount 中进行。
我是一名优秀的程序员,十分优秀！