Reactjs 使用react在组件之间进行数据传输

我有一个Landing.js

             protected getSelectedRow() {
              const rowUuids = this.getTable().getSelections();
             const rowDetails = this.getTable().getRow(rowUuids[0]);
                return rowDetails;
                 }

此行详细信息包含我选择的行。 我需要在侧窗格中显示行的详细信息，侧窗格在选择行时提供

这是我的testview.js

        export default class TestView extends React.Component {
          private formRef: SFormComponent;
          constructor(props) {
            super(props);
            this.state = {
            }
          }
          public render() {
           // console.log(ILandingPageProps)
            return (
              <div>
                <div>
                  <Collapse accordion>
                   <Panel header="Basic Information" key="2">
                     <SForm
                       {...this.getBasicInfoForm()}
                        wrappedComponentRef={form => (this.formRef = form)}
                      />
                    </Panel>
                  </Collapse>
               </div>
        <div>
          <Collapse accordion>
            <Panel header="Status Information" key="1">
              <SForm
                {...this.getStatusInfoForm()}
              />
            </Panel>
          </Collapse>,
      </div></div>
    );
           }
  private getBasicInfoForm() {
    const formConfig: ISFormProps = {
       initialData:this.props.imageSelectedRowUuid,
      sections: [
        {
          id: 'default',
          elements: [
            {
              type: SFormElementTypes.DESCRIPTION,
              id: 'image_name',
              name: 'image_name',
              label: 'Image Name',
              value: "check"
            },
            {
              type: SFormElementTypes.DESCRIPTION,
              id: 'os_version',
              name: 'os_version',
              label: 'OS Version',
              value: "check"
            },
            {
              type: SFormElementTypes.DESCRIPTION,
              id: 'vendor',
              name: 'vendor',
              label: 'Vendor',
              value: "check"
            },

            {
              type: SFormElementTypes.DESCRIPTION,
              id: 'family',
              name: 'family',
              label: "Family",
              value: "check"
            },

            {
              type: SFormElementTypes.DESCRIPTION,
              id: 'supported_platforms',
              name: 'supported_platforms',
              label: 'Supported Platforms',
              value: "check"
            },
          ]
        }]
    }
    return formConfig;
  }
  private getStatusInfoForm() {
    const formConfig: ISFormProps = {
      // initialData:this.props.imageSelectedRowUuid,
      sections: [
        {
          id: 'default',
          elements: [
            {
              type: SFormElementTypes.DESCRIPTION,
              id: 'configuration_status',
              name: 'configuration_status',
              label: 'Configuration Status',
              value: "check"
            },
          ]
        }]
    }
    return formConfig;
  }
}

导出默认类TestView扩展React.Component{
私有formRef:SFormComponent；
建造师（道具）{
超级（道具）；
此.state={
}
}
公共渲染（）{
//console.log（ILandingPageProps）
返回(
（this.formRef=form）}
/>
,
);
}
私有getBasicInfo表单（）{
const formConfig:ISFormProps={
initialData:this.props.imageSelectedRowUuid，
章节：[
{
id:'默认'，
要素：[
{
类型：SFormElementTypes.DESCRIPTION，
id:'图像名称'，
名称：'image_name'，
标签：“图像名称”，
值：“检查”
},
{
类型：SFormElementTypes.DESCRIPTION，
id:“os_版本”，
名称：“os_版本”，
标签：“操作系统版本”，
值：“检查”
},
{
类型：SFormElementTypes.DESCRIPTION，
id:'供应商'，
名称：'供应商'，
标签：“供应商”，
值：“检查”
},
{
类型：SFormElementTypes.DESCRIPTION，
id:'家庭'，
姓名：'家庭'，
标签：“家庭”，
值：“检查”
},
{
类型：SFormElementTypes.DESCRIPTION，
id:“受支持的_平台”，
名称：“受支持的_平台”，
标签：“受支持的平台”，
值：“检查”
},
]
}]
}
返回formConfig；
}
私有getStatusInfoForm（）{
const formConfig:ISFormProps={
//initialData:this.props.imageSelectedRowUuid，
章节：[
{
id:'默认'，
要素：[
{
类型：SFormElementTypes.DESCRIPTION，
id:“配置_状态”，
名称：“配置状态”，
标签：“配置状态”，
值：“检查”
},
]
}]
}
返回formConfig；
}
}

我需要在表的value列中追加值。当前显示为“检查”。

---

我正在使用react.js

尝试使用

Redux Store

全局存储数据，并使用

mapstatetops

作为组件的道具访问数据。通过这种方式，您可以在组件之间共享数据。单击表行时，尝试使用forLoop获取与rowData一起存储的键的数据。避免在您的案例中使用本地状态。希望能有帮助

尝试使用或类似于在组件之间共享状态