标签: react-component

我从反应原生开始。我从 giphy API 请求一个 gif，然后更新我的 giphyUrl 状态（状态已更改），但 gif 没有更改（组件未重新渲染）。

class QuoteList extends Component {
  state = { quotes: [],
            giphyUrl: 'https://media.giphy.com/media/nZQIwSpCXFweQ/giphy.gif'
          };

  componentWillMount() {
    console.log('Again?')
    axios.get('https://api.tronalddump.io/search/quote?query='+this.props.characterName)
      .then(response => this.setState({ quotes: response.data._embedded.quotes }))
    this.getGiphy()
  }

  getGiphy() {
    console.log('getgif')
    const GiphyUrl = "https://api.giphy.com/v1/gifs/search?api_key=tutu&limit=1&q=" + this.props.characterName.replace(" ", "+");
    console.log(GiphyUrl)
    axios.get(GiphyUrl)
      .then(response => {
                  console.log(response)
                  console.log(response.data.data[0].url)

                  this.setState({ giphyUrl: response.data.data[0].url })
                  console.log(this.state)
                })

  }

  renderQuotes() {
    return this.state.quotes.map(
      quote => <QuoteDetail key={quote.quote_id} quote={quote}/>
    );
  }
  render() {
    return (
      <ScrollView>
      <Image
        source={{uri: this.state.giphyUrl}}
        style={styles.gifStyle}
      /> …

作为 ReactJS 的新手，我需要有关全局变量声明和使用的帮助。这种情况是我有不同的模块，我想访问一个在所有模块中都可用的变量，而不管它们的关系如何。准确地说，我有一个管理面板和一个用户仪表板，它们没有共同的父级。但是，我希望在管理面板中设置一个变量的值，并在用户仪表板和其他模块中使用该值。我尝试寻找解决方案，但找不到可行的解决方案。如果使用示例来解释解决方案，那将是一个很大的帮助。

我在 React 应用程序上安装了 rc-slider React 组件，但我需要从滑块输出当前值，我该怎么做？这是当前的代码：

import React from 'react';\nimport 'rc-slider/assets/index.css';\nimport 'rc-tooltip/assets/bootstrap.css';\nimport Slider from 'rc-slider';\n\nconst createSliderWithTooltip = Slider.createSliderWithTooltip;\nconst Range = createSliderWithTooltip(Slider.Range);\n\nexport class RangeSlider extends React.Component {\n  render() {\n    return (\n      <div>\n        <Range min={0} max={10000} defaultValue={[800, 3000]} tipFormatter={value => `${value}\xe2\x82\xac`} />\n      </div>      \n    )\n  }\n}\n

另外，如何从抓取滑块手柄时显示值的工具提示中更改字体系列？

我写了一个带有状态的组件，chosenGenre在它里面，有一个函数可以根据点击的按钮改变状态。

我想采用更新的状态（即string）并在另一个组件中使用它。

这是声明状态的组件：

import React, { Component } from 'react';
import Genre from './Genre';
import './GenreSelectPage.css';
import Blues from '../Blues.png';
import Classical from '../Classical.png'; 
import Country from '../Country.png';

export default class GenreSelectPage extends Component{

    state = {
        chosenGenre: ""
    }

    handleClick = (genreName) => {
        this.setState({ chosenGenre: genreName });
    }

    render() {
        return(
        <div className = "GenreSelectPage">
        <h3>Select your desired Kollab Room Genre</h3>
        <Genre genrePicture= {Blues} genreClicked = {()=>this.handleClick("Blues")}/>
        <Genre genrePicture= {Classical} genreClicked = {()=>this.handleClick("Classical")}/>
        <Genre …

在不使用任何其他库的情况下使用 id 在反应中滚动到特定的 div，我发现了一些他们使用滚动库的解决方案

这是我的WrappedQuestionFormFinal组件中的 div 代码

 <div className="form-section">
            <Row>
              <Col xs={24} xl={4} className="form-section-cols">
                <h3 id={id}>
                  {t('QUESTION')} {t(id + 1)}
                </h3>
              </Col>
             </Row>
 </div>

它是通过这里组件调用的嵌套组件

      <WrappedQuestionFormFinal
        allQuestions={questions}
        updateScreenTitle={this.props.updateScreenTitle}
        handleDeleteQuestion={this.handleDeleteQuestion}
        question={questions[q]}
        dublicateQuestion={dubQuestion}
        dependantQuestion={dependant}
        id={i}
        key={i}
        tags={this.props.tags}
        changeOrder={this.changeOrder}
        changeScreenNo={this.changeScreenNo}
      />,

我面临的问题是这个表单有大约 10 个问题，如果发生错误时提交，我必须滚动发生错误的页面。Id 被赋予 h1 标签，这是唯一的

我是反应 js 的新手。我正在尝试创建一个组件。为此，我已经安装了成功安装的引导程序（版本 4.1.1）。

然后我在 index.js 中导入了相同的内容，并在重新加载页面 (localhost:3000) 时收到错误消息：

Module not found: 
Can't resolve 'bootstrap/dist/css/bootstrap.css' in 'C:\Users\test\counter-app\src'

Run Code Online (Sandbox Code Playgroud)

我的index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.unregister();

我的package.json：

{
  "name": "counter-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }, …

我正在处理来自与其他表有许多关系的表的 API 数据。它使用参考表和连接表。我必须使用跨多个（如果不是全部）组件共享的数据。在 App.js/root 组件中进行所有 api 调用是否不好？为什么或者为什么不？

编辑：我目前正在使用 redux，并考虑将所有引用表值存储在全局状态中，这样我就可以在需要的地方进行查找。

API 响应示例

{
  "name": "Adam"
  "schoolId": 2,
  "countryId": 6,
}

学校范例参考表

{
  "id": 2,
  "name": "High School",
}

国家示例参考表

{
  "id": 6,
  "name": "Bulgaria"
}

应用程序.js

function App({ getCountries, getSchools }) {
  // Get all reference table data
  useEffect(() => {
    getCountries();
    getSchools();
    // get...(); All other reference tables
  }, [
    getCountries,
    getSchools,
  ]);

  return (
    <Provider store={store}>
      <div className="App">
        <Router>
          <Fragment>
            <div className="d-flex align-items-stretch wrapper">
              <div id="sidebar">
                <div className="sidemenu …

说<componentX \>当点击“创建框”按钮时，componentX 应该附加在框容器内。如果我单击创建框 3 次，那么三个 componentX 应该附加到框容器内（这不是简单地保留组件然后在单击创建框时隐藏和显示）。在 ReactJS 中实现这一目标的所有方法是什么？

import ComponentX from './ComponentX.jsx';

class App extends React.Component{
	constructor(){
		super();
		
		this.state = {

		}
	}

	render(){
		let board = Box;

		return(
			<div>  	
				<a onClick={}>Create Box</a>
				<div className="box-container"></div>
			</div>
		);
	}
}

export default App;

我尝试找到将Iframe添加到我的本机应用程序的任何方法。我找到了react-iframe，但是对我来说不起作用。我关注了文件。我只是导入react-iframe并复制iframe标签以使用。我的结果如下图所示。

我需要在React Native应用程序中使用Iframe的其他方法。谢谢。

我想使用useStyle设置类Component的样式。但这很容易实现。但我想改用Component。但是我不知道该怎么做。

import React,{Component} from 'react';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles } from '@material-ui/core/styles';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';


    const useStyles = makeStyles(theme => ({
      '@global': {
        body: {
          backgroundColor: theme.palette.common.white,
        },
      },
      paper: {
        marginTop: theme.spacing(8),
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
      },
      avatar: {
        margin: theme.spacing(1),
        backgroundColor: theme.palette.secondary.main,
      }
}));

class SignIn extends Component{
  const classes = useStyle(); // how to assign UseStyle
  render(){
     return(
    <div className={classes.paper}>
    <Avatar className={classes.avatar}>
      <LockOutlinedIcon />
    </Avatar>
    </div>
  }
}
export default SignIn;