标签: react-props

我刚开始在 iOS 上使用 React native 看看感觉如何，我有一个愚蠢的问题.. 我看到每个人都在谈论“道具”，每当我阅读文章或教程时，作者经常使用这个术语，它是代码中相同。例如，在类声明中，我经常看到像这样的构造函数：

class MyClass extends Component {

    constructor(props) {
        super(props);
        this.state = { message: '' };
    }
}

我找不到关于道具是什么的明确解释，有人可以启发我吗？

是否有可能获得jsx由Parent组件包装的实际“原始”文本（例如 from props.children）？

鉴于此组件：

<Parent>
    <Child name={'test'} />
</Parent>

题：

在Parent.js，我可以用this.props.children（或其他任何东西）做任何事情来得到这个（最好是一个字符串）：

输出：

"<Child name={'test'} />"

我最近看到了这种类型的反应模式，其中状态是通过使用this.state以下命令设置的：

class ShowMe extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            showButton: false,
        };
    }

    render() {
        if (this.props.show) {
            this.state.showButton = true; //setting state in render!!
        }

        return (
            <div>
                <div> Show or hide button </div>
                {this.state.showButton && <Button content='Btn'/>}
            </div>
        )
    }
}

这似乎是一种反模式。这会导致错误吗？它似乎工作正常。

我只是使用组件生命周期来设置状态：

class ShowMe extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            showButton: false,
        };
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.show) {
            this.setState({
                showButton: true,         
            })
        }
     }

    render() {
        return (
            <div> …

我有一个路由，它接受一个 id 并为每个 id 呈现相同的组件，例如： <Route path='/:code' component={Card}/>

现在在 Link 标签中，我将一个 id 传递给组件。现在 Card 组件根据传递的 id 获取其他详细信息。但问题是它只为一个 id 呈现，如果我单击返回并转到下一个 id，则不会更新。我搜索并发现可以使用 componentsWillReceiveProps 但在 React 的最新版本中它已被弃用。那么如何做到这一点呢？

我已经创建了一个自定义的Activity Indicator类,我想从我使用它的地方控制它的隐藏/显示.

这就是我所做的.

CustomActivityIndi​​cator.js

    import React, { Component } from 'react';
import { ActivityIndicator, View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native';
import colors from '../../../styles/colors';
import { consoleLog } from '../../../utils/globalFunctions';

const { width, height } = Dimensions.get('window');

export default class CustomActivityIndicator extends Component {

    constructor(props){
      super(props);
      this.state = {
        show: this.props.show       
      }
    }

    static getDerivedStateFromProps(nextProps, prevState) {

      let outObj = {};
      consoleLog('Login - nextProps.show - ' + nextProps.show + ' prevState.show - ' + prevState.show);    
      if(nextProps.show !== prevState.show) …

当 props 改变时如何强制渲染我们的组件？如何在子组件的 props 更改时强制渲染父组件？

我搜索了很多，但所有解决方案在新的 React 版本中都被弃用了。

在我的任何页面（路由精确路径=“/post/:id”组件={post}）例如（siteUrl/post/1）我从道具（this.props.match.params）和那个有效。

但是当我在单页组件 (Post) 和此路由 (siteUrl/post/1) 中时，当我将新的 Props 传递给此组件 (:id) 时。

props 会改变但单个组件和父组件不会重新渲染...

我已经开始使用react-hooks并且有一些我想了解的东西。我有这个useEffect钩子，我正在分离useEffect钩子，我想知道每个钩子何时运行。

function MyComp(props) {
    useEffect(
       () => {
         fetchSomeData(props.filters)
       },[props.filters]
     )
    return (
        <div>will show my data here</div>
     )
}

此挂钩是否仅在props.filters更改后才运行？

还是我必须使用prevProps检查它是否已更改？

像这样：

function MyComp(props) {
   const prevProps = useRef(props);
   useEffect(
       () => {
           if (prevProps.filters !== props.filters) {            
              fetchSomeData(props.filters)
           }
       },[props.filters]
   )
   return (
     <div>will show my data here</div>
   )
}

我有一个react-big-calendar（父容器），我还有一个选择，根据这个选择（医生姓名）获取日历的事件，当我点击它时我有一个按钮，对话框将be 出现（另一个组件），在这个对话框中，我有一个表单可以在选择后添加一个事件，当我发布我的 API 时，我将它保存在本地存储中，但是在刷新后添加的事件没有出现在我的日历上页面并重新选择医生姓名。但我想，当我点击保存按钮时，会直接添加到日历上，并且会出现在日历上。

我的日历代码是：

   import Popup from './Popup';
export default class Calendar extends Component {
constructor(props){
    super(props);
    this.state = {
      events : [],
      open: false,
}}
componentDidMount = () => {
    fetch(process.env.REACT_APP_API_BACKEND_YET+'get_liste_praticien.php')
      .then(Response => Response.json())
      .then(data => {
        this.setState ({ praticiens : data })
        localStorage.setItem('Liste de praticiens ', JSON.stringify(this.state.praticiens))
    })
}
fetchData = (nom,identifiant_user) => {
    this.setState({
      events: [],
      evtStorage:[],
      prevEvents:[], 
      evtBackend:[]
    })
      fetch(process.env.REACT_APP_API_BACKEND+'get_liste_planning')
        .then(Response => Response.json())
        .then(data => {
          let evts = data.ListeResult;
          for …

我是React的新手，所以我希望我能正确解决这个问题。首先，我有一个名为SearchLocationsScreen的屏幕。在该屏幕内，我有一个名为Map的组件，在Map内有一个名为LocationMarker的自定义标记组件。在与Map组件相同的层次结构级别上，我有一个自定义的ModalBox，称为CheckinModal。这是一个粗略的图表可以帮助您：

在SearchLocationsScreen中，我从API调用中获取位置信息。然后，将这些位置传递到我的地图组件。在我的Map组件内部，我将标记的信息向下传递到自定义LocationMarker类，并填充地图。

目的是按下一个标记，并从底部弹出CheckinModal，并使用所按下的特定标记的信息填充它。为此，我使用useRef钩子和forwardRef钩子将对模式的引用传递给LocationMarker类。我在这里打电话ref.current.open()，模态按预期方式打开。

问题是我无法找到一种方法来从标记传递位置信息，将层次结构备份到屏幕上，再向下到模态以用相关信息填充模态。有谁知道如何实现这一目标？我将下面的代码发布到屏幕，地图组件和标记组件（不包括样式）。在此先感谢您的帮助。

SearchLocationsScreen.js

const SearchLocationsScreen = ({isFocused, navigation}) => {

    const {updateLocation} = useContext(CurrentLocationContext);

    // hooks
    const callback = useCallback((location) => {
        updateLocation(location)
    }, []);
    const [err] = useCurrentLocation(isFocused, callback);
    const [businessLocations] = useGetLocations();

    const modalRef = useRef(null);

    let locations = [];

    if (businessLocations) {
        for (let x …

我有一个虚拟项目。在我的项目中，我有两个页面。（test1 和 test2）我想将一个道具从 page1 传递到 page2。我知道我可以使用 useRouter 钩子，但我不想将此道具设置为查询字符串。在我的 test1 页面中，我有一个颜色变量。这是常量，并且有一个黄色值。我想在我的 page2 中使用此颜色作为道具（props.color），这是我的 test1 页面

import React from 'react';
const Test1 = props => {
   const color='yellow';
    return (
        <div>
            test1
        </div>
    );
};

export default Test1;

这是我的 test2 页面

import React from 'react';

const Test2 = props => {
    return (
        <div>
            Your color is {props.color}
        </div>
    );
};


export default Test2;