标签: react-props

在JSX中,如何props从引用的属性值中引用值？

例如:

<img className="image" src="images/{this.props.image}" />

生成的HTML输出是:

<img class="image" src="images/{this.props.image}">

在不使用类的情况下,如何在函数无状态组件中使用PropTypes？

export const Header = (props) => (
   <div>hi</div>
)

我有一个我想通过REACT输出的对象

question = {
    text: "Is this a good question?",
    answers: [
       "Yes",
       "No",
       "I don't know"
    ]
} 

而我的反应成分(减少)是另一个组成部分

class QuestionSet extends Component {
render(){ 
    <div className="container">
       <h1>{this.props.question.text}</h1>
       {this.props.question.answers.forEach(answer => {     
           console.log("Entered");  //This does ifre                       
           <Answer answer={answer} />   //THIS DOES NOT WORK 
        })}
}

export default QuestionSet;

正如你从上面的snippit中看到的那样,我正在尝试插入组件的数组通过在道具中使用数组Answers,它确实是itterate但不输出到HTML中.

我有一个对象包含多个常见的键值道具,我想传递给一些jsx.像这样的东西:

const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps />

我希望这个功能可以传递个别道具:

<MyJsx myProp1={commonProps.myProp1} myProp2={commonProps.myProp2}/>

这可能吗？

这是我在 StackOverflow 上的第一篇文章，如果我没有遵循正确的格式，我深表歉意。

我正在构建我的第一个应用程序，tab navigator from React Navigation v 5.x并且在将道具从一个屏幕传递到另一个屏幕时遇到了一个大问题

我想要实现的是：

1. 在我的一个屏幕中更改数据列表。
2. 让这些更改影响另一个屏幕上发生的事情。

我已经尝试过这个（我没有设置道具传递下去），这个（react-navigation 的弃用版本）和这个（react-navigation 的旧版本）。

和 Redux，但当前版本的 React 导航没有可用的示例。

我已经对此束手无策了，真的需要逐步了解如何实现这一目标。这是我想要做的粗略草图：

我想到的方法是通过回调将父状态作为道具发送下来，但是我找不到通过最新版本的反应导航中的屏幕组件发送道具的方法......

这是我的导航设置：

const Tab = createBottomTabNavigator()

export default class MyApp extends Component{

    constructor(props) {
        super(props);
    }

    render(){
        return (
            <NavigationContainer>
                <Tab.Navigator 
                    screenOptions={({ route }) => ({
                        tabBarIcon: ({ focused, color, size }) => {
                            let iconName;

                            if (route.name === 'My tests') {
                                iconName = focused ? 'ios-list-box' : 'ios-list';
                            } else …

假设我有一个带有两个子组件的父组件：

const Parent = () => {
   const [myVar, setmyVar] = useState(false)

   return (
     <>
       <MyChildComponent1 myVar={myVar} setMyVar={setMyVar} \> 
       <MyChildComponent2 myVar={myVar} \>
     </>
   )
}

现在我将如何正确设置类型MyChildComponent2？

这是我到目前为止想出的：

const MyChildComponent1 = (
  {myVar, setMyVar}: 
  {myVar: boolean, setMyVar: (value: boolean) => void}) = (...)

类型是否setMyvar正确？或者应该是别的什么？

在我的代码中，我没有任何显式使用componentWillMount，但在运行webpack.

react-dom.development.js:12386 警告：componentWillMount 已重命名，不推荐使用。有关详细信息，请参阅 https:/fb.me/react-unsafe-component-lifecycles。

• 将有副作用的代码移动到 componentDidMount，并在构造函数中设置初始状态。
• 将 componentWillMount 重命名为 UNSAFE_componentWillMount 以在非严格模式下抑制此警告。在 React 17.x 中，只有 UNSAFE_ 名称有效。要将所有已弃用的生命周期重命名为其新名称，您可以npx react-codemod rename-unsafe-lifecycles在项目源文件夹中运行。

请更新以下组件：foo、bar

我确实运行了建议的npx react-codemod rename-unsafe-lifecycles，但警告并没有消失，只是将其措辞更改为

react-dom.development.js:12386 警告：componentWillMount 已重命名，不推荐使用。[...]

在这里，foo和bar都是我们团队编写的自定义组件，以及外部库的一些组件。对 Visual Studio 解决方案的完整搜索componentWillMount没有给我任何结果。有人可以解释一下我做错了什么吗？

我在另一个问题上读到一条评论，说明

我没有任何明确的地方 with componentWillMount，但在构造函数之后我确实有 [...] 一行代码，其中state={ tabindex:0 }如何将其“移动”到构造函数中？

答案是写 constructor(props) {super(props); this.state = { tabindex:0 }}。有人可以解释一下这里发生了什么吗？我必须在我们的代码中寻找什么样的模式？

更多细节

    printWarning    @   react-dom.development.js:12386
lowPriorityWarningWithoutStack  @   react-dom.development.js:12407
./node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings   @   react-dom.development.js:12577
flushRenderPhaseStrictModeWarningsInDEV @   react-dom.development.js:25641 …

我正在尝试正确输入映射子组件的道具：

type Props = {
    children: any
}

const MyComponent: FunctionComponent<Props> = () => (React.Children.map(children, someMapingFunction);

我一直在用JSX.Element，但感觉不太对劲。

我试图检测道具何时在已componentDidUpdate安装组件内发生变化。我有一个测试（refreshData在下面的代码中）工作正常。是否有可能以一种未被检测到的方式传递道具componentDidUpdate(prevProps)？

在 component.js 中：

componentDidUpdate(prevProps){

    //works fine
    if ( this.props.refreshData !== prevProps.refreshData ) {
        if ( this.props.refreshData )
            this.refreshData();
    }

    //these two arent calling
    if ( this.props.selectedCountries !== prevProps.selectedCountries ) {
        if ( this.props.selectedCountries )
            console.log('updated selected countries');
    }

    if ( this.props.selectedLocations !== prevProps.selectedLocations ) {
        console.log('updated selected locations');
    }

}

并在 App.js 中传递如下道具：

selectLocation = (id, type, lng, lat, polydata, name, clear = false) => {

  //console.log(type);
  //console.log(lng);
  //console.log(lat);
  //console.log(polydata);

  let selectedType = …

我正在尝试按照本教程学习 ReactJS： 教程

我是编程语言的新手，所以我现在不知道该怎么做。

当我尝试添加“Fetchemployee.tsx”文件时，该this.state方法出现错误。

(TS) 类型“FetchPeriod”上不存在属性“state”

这是代码：

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Link, NavLink } from 'react-router-dom';

interface FetchPeriodDataState {
    periodList: PeriodData[];
    loading: boolean;
}

export class FetchPeriod extends React.Component<RouteComponentProps<{}>, FetchPeriodDataState> {
    constructor(props) {
        super(props);
    this.state = { periodList: [], loading: true };


    fetch('api/Period/Index')
        .then(response => response.json() as Promise<PeriodData[]>)
        .then(data => {
            this.setState({ periodList: data, loading: false });
        });

    // This binding is necessary to make "this" work …